不可能从动作模块调用函数

Question

习惯了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,
    },
});

store/modules/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 上有完全相同的代码（除了 state 是一个 vuejs 对象）并且它可以工作，所以我不明白与 nuxt 的区别。

感谢您的帮助

Answer 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);
          }
      }
  }

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


import { mapActions } from "vuex";

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

        async getUser() {
            this.initUser();
        }
    }
}

甚至像这样：

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

不可能从动作模块调用函数

Impossible call function from action module

vuex

nuxt.js