Vuex4调用this.store.commit()报injection "store" not found错误如何解决

你遇到的injection "store" not found报错，以及后续会触发的mutation调用失败问题，共存在3处代码错误，按如下步骤修复即可：

• 第一处：main.js中store导入路径不匹配
  你当前写的导入路径是./store，但实际store文件存放在./store/store.js路径下，路径错误导致app.use(store)注册的不是你定义的store实例，依赖注入自然找不到对应store对象。将导入语句修改为正确路径即可：

  // main.js 修正后的导入代码
  import { createApp } from "vue";
  // 替换为实际文件路径
  import { store } from "./store/store.js";
  import App from "./App.vue";
  
  const app = createApp(App);
  app.use(store);
  app.mount("#app");
  

  如果你在store文件夹下创建了index.js做统一导出，需要确认index.js中正确转发了store实例，避免导出空对象或错误对象。
• 第二处：store配置项拼写错误
  Vuex 中定义状态修改方法的配置项固定为mutations（复数形式），你当前写的是单数mutation，即便store注入成功，后续commit调用时也会报“找不到对应mutation”的错误。修改store配置：

  // store/store.js 修正后代码
  import { createStore } from "vuex";
  // 删掉冗余的import vue from "vue"，这是Vue2+Vuex3的旧写法，Vue3下不需要
  export const store = createStore({
    state: {
      username: null,
      token: null,
    },
    getters: {
      getUsername: function (state) {
        return `${state.username}`;
      },
    },
    // 注意字段名是mutations，带s
    mutations: {
      changeusername: function (state, newusername) {
        state.username = newusername;
      }
    },
  });
  

  另外注意你最初写的commit调用里方法名拼错成了changerusername（多了一个r），和你定义的changeusername不匹配，调用时要保持拼写完全一致。
• 第三处：可选写法优化
  你在setup中返回store再通过this.store调用的写法可以正常运行，但更符合Vue3组合式API规范的写法是直接在setup中完成方法定义，不需要绕一层this访问：

  setup() {
    const store = useStore();
    const loginArrow = (u, p) => {
      store.commit("changeusername", u);
    };
    return {
      loginArrow
    };
  }
  

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