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

Question

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

现在我正在使用 Vuex 和 Vue Router，代码如下：

路由文件，非常简单，只是对不在家的路由的延迟加载。

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>

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

<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() {} 键，否则我使用 computed...我可以在这里做什么？我迷路了。

编辑，这里是完整的商店文件：

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 不是一个状态，它是一个命名空间模块，所以不能像 ...mapState(['songs']) 那样直接访问。

为了映射商店 songs 模块的状态，我们使用 mapState 用于命名空间模块的辅助语法：

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

所以，关于这个问题的正确语法是：

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

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

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

Property or method "X" is not defined on the instance with vuex and vue router

javascript

vue.js

vue-router

vuex

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

Property or method "X" is not defined on the instance with vuex and vue router

javascript

vue.js

vue-router

vuex

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