在命名空间存储中调度操作 (Vuex/Nuxt)

Question

我在访问 Nuxt SPA 中命名空间存储中的操作时遇到问题。 假设我在商店目录中有一个名为 "example.js" 的商店文件：

import Vuex from "vuex";

const createStore = () => {
    return new Vuex.Store({ 
      state: {
        forms : [],
      },
      mutations: {
        setForms(state, forms) {
          state.forms = forms
        }
      },
      actions: {
        setForms(vuexContext, forms) {
          vuexContext.commit("setForms", forms)
        }
      },
      getters: {
        getForms(state) {
          return state.forms
        }
      }
    })
}

export default createStore;

然后在某个页面上，我尝试获取数据并将其放入存储中：

  async fetch(context) {
    return axios.get(..)
      .then(data => {
          context.store.dispatch("example/setForms", data.data) 
      })
      .catch(e => {
        context.error(e);
      });

这给了我：

未知动作类型：example/setForms

我错过了什么？

Answer 1

请将namespaced: true 添加到您的商店。所以：

const moduleA = { 
      namespaced: true,
      state: {
        forms : [],
      },
      mutations: {
        setForms(state, forms) {
          state.forms = forms
        }
      },
      actions: {
        setForms(vuexContext, forms) {
          vuexContext.commit("setForms", forms)
        }
      },
      getters: {
        getForms(state) {
          return state.forms
        }
      }
}


const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});


export default store;

所以你可以将它用作$this.store.commit("a/setForms");

Answer 2

您的example.js 有点错误，应该是这样的：

//store/example.js

export const state = () => ({
  forms: [],
});
export const mutations = {
  setForms(state, forms) {
    state.forms = forms;
  },
};
export const actions = {
  setForms(vuexContext, forms) {
    vuexContext.commit("setForms", forms);
  },
};
export const getters = {
  getForms(state) {
    return state.forms;
  },
};

并像这样使用它：

  fetch() {
    return axios
      .get(...)
      .then((data) => {
        this.$store.dispatch("example/setForms", data.data);
      })
      .catch((e) => {
        context.error(e);
      });
  },