时间戳

首页 > 解决方案 > 在 Vuex 中导入可重用的动作

javascript - 在 Vuex 中导入可重用的动作

问题描述

我正在做一个 NUXT 项目，我发现自己将相同的操作复制到多个存储/模块中。因此，我已将操作提取到单独的文件中，现在将其导入到模块中。这很好用，但我偶尔需要一个不是样板的额外操作。如何导入样板操作并在模块中包含自定义操作？

标签模块：

    import Vue from "vue";
    import globalActions from "../utils/Actions.js";
    export const state = () => ({ /* removed */ })
    export const actions = globalActions;
    //Need actions to be a bit more flexible to include non-boilerplate actions

我不确定这是否重要，但这里是 utils/Actions.js 它只是通常在模块中的标准“导出默认 {}”。

      export default {
        all({ commit }, all) {
          all.data.forEach(item => {
            commit("add", item);
          });
        },

        async list({ commit, state, getters, dispatch }) {
           /* flush resets the state */
           commit("flush");
           /*Makes the api call using the repository setup */
           let params = getters.params;
           const results = await this.$repositories[state.type].index(params);
           const ids = results.data.map(item => item.id);
           let page = state.page;
           dispatch("all", results);
           /*Adds a encyclopedia that maps pages to index */
           commit("SET_REFERENCE", { page, ids });
           commit("totalItems", results.meta.total);
        },
     }

理想情况下，我认为模块操作看起来像这样：

    export const actions = {
      list(){ return globalActions.list } 
      nonBoilerPlateAction({commit})
    }

我很确定我需要更改导入 globalActions 的方式，并且我的“理想”操作语法是错误的，但我不确定我需要调整什么。

标签： javascriptvue.jsvuejs2vuexnuxt.js

解决方案

要合并导入的操作和自定义操作，您可以通过以下方式合并这两个操作：

export const actions = { 
    ...globalActions, 
    nonBoilerPlateAction({commit}) { 
      commit('something') 
    } 
}

尽管您用来重用模块的方式效果很好，但我建议您改用命名空间。这样，您创建的所有模块都可以轻松重复使用，而无需将它们导入任何其他文件。您可以轻松地从另一个模块访问其他模块。

推荐阅读