使用Vuex的mapGetters时报reading 'getters'未定义错误如何解决

报错触发原因 #

• 错误混用组件生命周期钩子与路由守卫：代码中beforeCreate(to, from, next)属于错误写法，beforeCreate是组件原生生命周期钩子，没有to、from、next三个入参，调用不存在的next()会导致组件上下文异常，最终触发mapGetters读取$store失败。
• 未将store正确注入Vue实例：mapGetters默认从组件实例的$store属性读取Vuex实例，若入口文件未配置store注入，组件实例不存在$store属性，就会报读取getters失败的错误。
• store导入路径错误：代码中import store from '../../../store'的相对路径如果书写错误，会导致导入的store实例为undefined，引发连锁异常。
• Vuex模块化配置错误：使用products/getState命名空间写法，需要确认products模块开启了namespaced: true，且模块下确实存在getState getter。

解决步骤 #

1. 修正钩子写法
   如果需要在进入路由前拉取数据，将错误的beforeCreate替换为组件内路由守卫beforeRouteEnter：

beforeRouteEnter(to, from, next) {
  Promise.all([
    store.dispatch('products/search'),
    store.dispatch('products/rec')
  ]).then(() => next())
}

如果就是需要在beforeCreate阶段拉取数据，直接删除错误参数和next调用：

async beforeCreate() {
  await Promise.all([
    store.dispatch('products/search'),
    store.dispatch('products/rec')
  ])
}

2. 确认入口文件store注入配置

• Vue2项目入口文件配置参考：

import Vue from 'vue'
import store from './store'
import App from './App.vue'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

• Vue3项目入口文件配置参考：

import { createApp } from 'vue'
import store from './store'
import App from './App.vue'

createApp(App).use(store).mount('#app')

3. 校验store导入路径
   在当前组件script中添加console.log(store)，若控制台输出为undefined，修正store的导入路径即可。
4. 校验Vuex模块配置
   确认store下products模块配置符合要求：

// store/modules/products.js
export default {
  namespaced: true,
  state: () => ({
    productList: [],
    productRecList: []
  }),
  getters: {
    getState: state => state
  },
  // mutations、actions正常配置
}

可选优化 #

如果使用Vue2版本，当前模板存在多个根节点，不符合Vue2语法要求，需要在外层包裹一个<div>标签包裹所有模板内容。

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