来自动作模块的不可能调用功能答案

【问题标题】：Impossible call function from action module来自动作模块的不可能调用功能
【发布时间】：2021-10-15 19:10:15
【问题描述】：

习惯了 vuejs，我在 nuxt 上创建了一个 store，但无法成功调用来自模块的函数。根据我的阅读，状态必须是一个函数，我做的东西，但仍然无法调用我的函数，这是我的商店：

存储/index.js

import Vue from "vue";
import Vuex from "vuex";
import user from "./module/user";

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules: {
        user,
    },
});

存储/模块/user.js

import Vue from "vue"

export default {
    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"
                await commit("INIT_USER", user);
            } catch (err) {
                console.error(err);
            }
        }
    }
}

pages/profile.vue

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

export default {
    methods: {
        ...mapActions(["initUser"]),

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

我在 vuejs 上有完全相同的代码（除了作为 vuejs 对象的状态）并且它可以工作，所以我不明白与 nuxt 的区别。

感谢您的帮助

【问题讨论】：

嗨，这里有什么问题？

标签： nuxt.js vuex

【解决方案1】：

Nuxt 有自己的方式来处理 Vuex 模块，你绝对应该利用它。见https://nuxtjs.org/docs/directory-structure/store/

简单来说，你想做的是：

在您的store 目录下，创建一个文件user.js 并将您的商店代码放入其中。 Nuxt 会自动获取它并注册为命名空间的 Vuex 模块。

重构您的商店代码，使其分别导出每个部分，如下所示：

  import Vue from "vue"

  export const state = () => ({
      user: null
  }),
  export const getters = {
      getUser: (state) => state.user
  },
  export const mutations = {
      INIT_USER(state, data) {
          Vue.set(state, "user", data);
      }
  },
  export const actions = {
      async initUser({ commit }) {
          try {
              const user = "John"
              await commit("INIT_USER", user);
          } catch (err) {
              console.error(err);
          }
      }
  }

在您的组件中 - 您可以按如下方式使用商店：

从“vuex”导入 { mapActions }；导出默认{ 方法： { ...mapActions('user', ['initUser']), 异步 getUser() { this.initUser(); } } }

甚至像这样：

<script>
export default {
    methods: {
        getUser() {
            this.$store.dispatch('user/initUser');
        }
    }
}
</script>

【讨论】：