Vuex，嵌套突变/动作是否可能？

Question

我想知道我们是否可以在 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' 字，我知道我可以反转单词并按降序 (A-Z) 对它们进行排序，例如 'AUTH_SET'、'PROFILE_SET' 等...

但我有一个想法，把它放在一个适合它的地方的物体中

// Example:

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

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

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

Got an error: Uncaught Error: [vuex] actions should be function or object with "handler" function but "actions.user" in module "user" is {}.

这可能吗？因为我喜欢这样，让我的代码更干净

提前致谢

Answer 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

编辑

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

选项 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 文件

Answer 2

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

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

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

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

Vuex，嵌套突变/动作是否可能？

Vuex, Is nested mutations / actions is possible?

vue.js

vuex