使用 vuex 和 vue 路由器的实例上未定义属性或方法“X”

Posted 2023-02-23

【中文标题】使用 vuex 和 vue 路由器的实例上未定义属性或方法“X”

【英文标题】：Property or method "X" is not defined on the instance with vuex and vue router

【发布时间】：2019-01-21 14:27:19

【问题描述】：

这个问题让我很烦恼，我是 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
)

【问题讨论】：

你这样做...mapState([ 'songs' ])。但是，我不认为 songs 在您的商店中是一种状态。您的商店中有 song 和 songList。映射它们。

我用完整的商店文件更新了帖子，有歌曲项。

songs 是这里的一个模块，它也有命名空间。所以，试试这个...mapState('songs', [ 'song', 'songList' ])

它成功了，但是为什么？

添加了相关解释的答案。

【参考方案1】：

这里的主要问题是songs 不是一个状态，它是一个命名空间模块，所以它不能像...mapState(['songs']) 那样直接访问。

为了映射 store 的 songs 模块的状态，我们使用 mapState 帮助器语法，旨在与命名空间模块一起使用：

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

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

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

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

更多信息，请参考this。