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)，如'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“中的”用户“是{}.。

这有可能吗？因为我喜欢这样，让我的代码更简洁

提前感谢

Answer 1

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

vuex模

简而言之，您可以有一个名为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 });

下面是一篇关于这个主题的进一步信息的文章：

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文件中。

Answer 2

它字面上说动作应该是一个函数，您正在定义这样一个对象：

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

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

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