在Nuxt中使用Vuex时遇实例属性未定义问题求助

核心错误点 #

你的代码存在几处关键问题：

1. 根Store配置错误
   根Vuex Store不需要设置namespaced: true，这个选项仅用于子模块。你在/store/index.js中添加了该配置，会导致命名空间逻辑混乱。

2. 组件调用Vuex的方式完全错误

• this.$store.dispatch[('vehicles/vehicles', this.vehicles)] 语法错误：dispatch是方法而非数组，且你并未定义vehicles/vehicles这个action
• 你需要获取的是getters中的数据，而非调用action
• 模板中使用vehicle.name，但你的state数据里只有registration和owner字段，无name属性，即便拿到数据也无法正常显示

3. 模板变量引用问题
   警告Property or method "vehicles" is not defined on the instance but referenced during render，是因为你最初的代码中，computed未正确返回数据，且data中的vehicles未被正确赋值。

修复步骤 #

第一步：修正根Store配置 #

修改/store/index.js，移除根Store的namespaced: true配置：

import Vuex from 'vuex';
import vehiclesModule from './modules/vehicles/index.js';

const createStore = () => {
  return new Vuex.Store({
    modules: {
      vehicles: vehiclesModule
    }
  })
}

export default createStore

第二步：正确在组件中获取Vuex数据 #

以下两种方式均能正确获取命名空间模块的getters数据：

方式一：直接通过$store.getters访问

<template>
  <div>
    <h1>test</h1>
    <ul>
      <!-- 替换不存在的name字段为实际存在的registration/owner -->
      <li v-for="vehicle in vehicles" :key="vehicle.id">{{ vehicle.registration }} - {{ vehicle.owner }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Vehicles',
  computed: {
    vehicles() {
      // 命名空间模块的getters需要添加模块名前缀
      return this.$store.getters['vehicles/vehicles']
    }
  }
}
</script>

方式二：使用mapGetters辅助函数（更简洁）

<template>
  <div>
    <h1>test</h1>
    <ul>
      <li v-for="vehicle in vehicles" :key="vehicle.id">{{ vehicle.registration }} - {{ vehicle.owner }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Vehicles',
  computed: {
    // 映射命名空间模块的getters
    ...mapGetters('vehicles', ['vehicles'])
  }
}
</script>

额外说明 #

如果后续需要通过action从后端拉取数据，需先在actions.js中定义对应action，通过mutation更新state后，再通过getters获取数据。

内容的提问来源于stack exchange，提问作者Paul