属性或方法"X"没有在vuex和vue路由器的实例上定义

Question

这个问题让我很恼火，我是Vue新手，我正在尝试制作一个简单的应用程序来练习。

现在我正在使用Vuex和Vue路由器，下面是代码：

路由文件非常简单，只是不在家的路由的懒负载。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/tracks',
      name: 'tracks',
      component: () => import(/* webpackChunkName: "about" */ './views/Tracks.vue')
    }
  ]
})

视图组件，它只渲染视图子对象：

<template>
  <div id="tracks">
    <logo></logo>
    <search></search>
    <songs></songs>
  </div>
</template>

<script>
import Logo from '@/components/Logo.vue'
import Search from '@/components/Search.vue'
import Songs from '@/components/Songs.vue'

export default {
  name: 'tracks',
  components: { Logo, Search, Songs }
}
</script>

songs组件，这是我制作逻辑的容器（现在就列出东西）

<template>
  <section id="track-list" class="columns is-centered">
    <div class="column is-4" v-show="!songList.length">
      <div class="notification is-danger">
        No tracks loaded :(
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
import SongCard from './SongCard.vue'

export default {
  name: 'songs',
  components: { SongCard },
  computed: {
    ...mapState([ 'songs' ])
  }
}
</script>

我认为问题出在渲染周期中，组件已装入，数据尚未加载，但这不是异步数据（至少不是我的），而是在状态下硬编码，初始化为空数组：

const state = {
  songList: [ ],
  song: null
}

// actions
const actions = {

}

// mutations
const mutations = {
  // [tracks.GET_TOP](state, payload) {},

  // [tracks.GET_TRACK](state, payload) {}
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

因为我使用Vuex，所以我不使用data() {}key，否则我使用comated...我迷路了。

编辑，这里是完整的存储文件：

import Vue from 'vue'
import Vuex from 'vuex'

import artists from './modules/artists'
import songs from './modules/songs'

import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    artists,
    songs,
    countries: {
      state: {
        selected: 'Mexico',
        list: [
          { value: 'spain', name: 'España' },
          { value: 'mexico', name: 'México' },
          { value: 'argentina', name: 'Argentina' }
        ]
    }
    }
  },
  actions,
  mutations
})

Answer 1

这里的主要问题是，歌曲不是一个状态，它是一个有名称空间的模块，因此不能像那样直接访问它。。。地图状态（['songs']）。

要映射存储区的歌曲模块的状态，我们使用mapStatehelper语法，用于名称空间模块：

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
}

因此，关于这个问题的正确语法是：

...mapState('songs', [ 'song', 'songList' ])

请注意，您也可以像上面的示例一样传递对象而不是数组。

有关更多信息，请参阅此。