Vuex，嵌套突变/动作是可能的吗？答案

【问题标题】：Vuex, Is nested mutations / actions is possible?Vuex，嵌套突变/动作是可能的吗？
【发布时间】：2021-04-06 06:24:40
【问题描述】：

我想知道我们是否可以在 Vuex 中使用嵌套突变/动作（如果我的英语不好，请提前抱歉）

我有这样的代码：

...
mutations: {
    SET_AUTH: (state) => {
        state.auth = true
    },
    SET_PROFILE: (state, payload) => {
        state.profile = payload
    }
},
actions: {
    userLogin: ({ commit }, payload) => {
        return new Promise((resolve, reject) => {
            Axios.post('/login', payload)
                .then(res => {
                    commit('SET_AUTH')
                    commit('SET_PROFILE', res.data.profile)
                    resolve(res)
                })
                .catch(...)
        })
    }
}

现在，当事情变大时，我必须向上滚动 2-3 次才能搜索是否已经设置了我需要的突变/动作，因为这一切都使用 'SET' 词，我知道我可以反转这个词并按降序 (AZ) 对它们进行排序，例如“AUTH_SET”、“PROFILE_SET”等...

但我有一个想法，将其放入适合其位置的对象中

// Example:

...
mutations: {
    user: {
        SET_AUTH: (state) => {
            ...
        },
        SET_PROFILE: (state, payload) => {
            ...
        }
    }
},
actions: {
    user: {
        login: ({ commit }, payload) => {
            //
        },
        ...
    }
}

然后当我发送一个动作时，例如：

this.$store.dispatch('user.login', ...);

遇到错误：未捕获的错误：[vuex] 操作应该是具有“处理程序”功能的函数或对象，但模块“用户”中的“actions.user”是 {}。

这甚至可能吗？因为我喜欢这种方式，所以让我的代码更干净

提前致谢

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

您可以使用 vuex 模块系统并将每个模块放在自己的 .js 文件中，这是它的文档：

vuex modules

简而言之，您可以拥有一个名为 user.js 的文件，其中包含：

export const state = () => ({
   // user related states
});

export const mutations = {
   // user related mutations
};

export const actions = {
  // user related actions
};

export const getters = {
  // user related getters
};

然后你可以像这样从组件中调度一个动作：

this.$store.dispatch('user/someAction', payload);

并访问组件中的状态，例如：

import { mapState } from 'vuex';
...
computed: {
  ...mapState('user', ['stateNameOne', 'stateNameTwo']),
}

等等……

当他们所做的只是将一个值设置为一个状态时，我也只想写一个这样的突变：

SET(state, { key, value }) {
  state[key] = value;
}

现在我只有一个突变，在其有效负载中，我使用key 指定要更新的状态，我的提交将是这样的：

commit('SET', { key: 'stateName', value: stateValue });

这里有一篇关于这个主题的更多信息的文章：

modules in vuex

编辑

当你在自己的 .js 文件中分离每个 vuex 模块时，你有两种替代语法：

选项 1：导出常量

例如在这个目录中：/store/store.js 你将拥有：

import * as name from '@/store/modules/name.js'

在这个目录的模块文件中：/store/modules/name.js 你将拥有：

export const state = { ... } 
export const mutations = { ... }
export const actions = { ... }
export const getters = { ... }

选项 2：导出一个对象

在/store/store.js:

import name from '@/store/modules/name.js'

在/store/modules/name.js:

export default {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... },
}

在这两种情况下，您的主 vuex 文件都可以像这样使用导入的模块：

export default new Vuex.store({
  modules: {
    name
  },
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... },
})

我没有在 vuex 文档中找到任何可以反映您正在尝试执行的操作的内容，例如嵌套操作和...

我认为这里唯一的选择是使用上述选项之一将每个模块分隔在其自己的文件中，然后将它们导入主 vuex 文件中

【讨论】：

你好，很抱歉回复晚了，目前我正在使用Vuex模块，但是方法不同，单个模块但不像你的方法先生，太多export让我很困惑，也许我真的不喜欢它，但我喜欢你的SET 突变，所以根据我的问题，这不可能吧？
我在答案中添加了一些附加信息，关于您的问题，我在文档中没有找到任何内容，所以我认为不可能

【解决方案2】：

它的字面意思是动作应该是一个函数，而你正在定义一个像这样的对象：

actions: {
user: {
    login: ({ commit }, payload) => {
        //
    },
    ...
 }
}

您应该更改用户对象并使其成为函数：

actions: {
user_Login: ({ commit }, payload) => {
        //
    },
    ...
}

【讨论】：