Vuex报错unknown mutation type: groceryStore/getStoreApple咨询

• 模块导入、注册完全错位
  看你src/store/index.js的代码：导入写的是import * as groceryStore from "./modules/groceries"，但你的groceries模块是默认导出，不是命名导出；更离谱的是注册模块的时候写的是groceryStore: groceries——这个groceries变量在当前文件里根本没定义，属于引用不存在的值，最后传给Vuex的modules其实是undefined，相当于根本没把业务模块加载进Vuex，当然找不到对应的mutation。这种情况一般控制台最前面会先抛ReferenceError: groceries is not defined，可以往前翻下最早的报错记录验证。
• 命名空间配置键名拼错
  你在groceries.js里写的是namespace: true，但Vuex用来开启命名空间的配置键是namespaced，就差最后一个d。键名写错的话，哪怕模块加载正常，Vuex也识别不到你要开命名空间，自然匹配不了groceryStore/xxx这种带前缀的调用。
• （不是当前报错的原因，但后续肯定踩坑）你现在所有mutation里都写了异步Firebase请求，这违反Vuex的规则：mutation必须是同步函数，异步逻辑要拆到actions里做，不然会出现状态更新不可控、devtools追踪不到变更的问题。

1. 改src/store/index.js的导入和注册逻辑

   import Vue from "vue";
   import Vuex from "vuex";
   // 模块是默认导出，直接拿默认值就行，别用*全量导入
   import groceryStoreModule from "./modules/groceries";
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     modules: {
       // 前缀就是你要的groceryStore，值是导入的模块对象
       groceryStore: groceryStoreModule,
     }
   });
   

2. 改groceries.js里的命名空间配置

   const groceryStore = {
     // 把原来的namespace改成正确的namespaced
     namespaced: true,
     // 剩下的state、mutations、getters原有内容不用动
     state: {
       fruit: {},
       fish: {},
       meat: {},
       sauce: {},
       spices: {},
       vegetables: {},
       bakery: {},
       beverages: {},
     },
     // ... 后续mutations、getters保持原有写法即可
   };
   export default groceryStore;
   

改完之后，你组件里写的带groceryStore/前缀的commit、getter访问就能正常识别了。

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