代码之家 › 专栏 › 技术社区 › Nano

在具有Vuex和Vue路由器的实例上未定义属性或方法“x”

vue-router vuex vue.js javascript

Nano · 技术社区 · 6 年前

这个问题让我恼火,我是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() {} 钥匙,否则我用 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
})

1 回复 | 直到 6 年前

vishal-wadhwa 6 年前

这里的主要问题是 songs 不是状态,而是命名空间模块,因此不能像这样直接访问 ...mapState(['songs']) .

映射的状态 歌曲 商店的模块,我们使用 mapState 用于命名空间模块的帮助程序语法:

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

因此,关于这个问题的正确语法是:

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

注意,您也可以像上面的例子一样传递一个对象而不是数组。

有关更多信息,请参阅 this 。