Nuxt项目中无法调用Vuex模块内action函数问题求助

核心问题原因 #

你遇到的问题由3个可直接修正的错误，以及Nuxt和原生Vue项目Vuex使用规则的差异导致：

• 语法错误：store/modules/user.js中state属性声明错误，对象属性需用冒号:而非等号=
• 路径引用错误：store/index.js中导入user模块的路径拼写错误，实际文件存放目录为modules而非module
• 冗余配置冲突：Nuxt内置Vuex自动注册能力，不需要手动初始化Vuex实例、手动调用Vue.use(Vuex)，原生Vue项目的手动配置逻辑在Nuxt环境下会和框架默认逻辑冲突

修正步骤 #

步骤1：删除冗余的store/index.js #

Nuxt约定store目录下的js文件会自动注册为Vuex模块，不需要手动创建store实例，直接移除你现有的store/index.js即可。

步骤2：修正store/modules/user.js的语法与配置 #

import Vue from "vue"

export default {
  // 开启命名空间，避免模块间命名冲突，更符合规范
  namespaced: true,
  // 把等号改为冒号
  state: () => ({
    user: null
  }),
  getters: {
    getUser: (state) => state.user
  },
  mutations: {
    INIT_USER(state, data) {
      Vue.set(state, "user", data);
    }
  },
  actions: {
    async initUser({ commit }) {
      try {
        const user = "John"
        // commit为同步方法，不需要加await，不影响功能但写法更规范
        commit("INIT_USER", user);
      } catch (err) {
        console.error(err);
      }
    }
  }
}

步骤3：修正页面中mapActions的调用 #

开启命名空间后，mapActions第一个参数传入模块名即可正确映射方法：

<script>
import { mapActions } from "vuex";

export default {
    methods: {
        // 第一个参数为user模块名，第二个参数为需要映射的action数组
        ...mapActions("user", ["initUser"]),

        async getUser() {
            this.initUser();
        }
    }
}
</script>

可选的兼容原生配置方案 #

如果你坚持要沿用原生Vue项目的手动注册逻辑，只需要修正两个错误即可运行：

1. 将store/index.js中导入路径改为import user from "./modules/user";
2. 将store/modules/user.js中的state = () => ({改为state: () => ({

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