javascript - Vuex 动作是否必须修改或使用 store 状态？

问题描述

使用 Vuex 存储操作来执行相关的异步操作（例如，GET 请求）而不实际修改存储的状态是一种好习惯吗？

我有一个 Vuex 商店。我们称它为主机。它包含一个对象作为它的状态，有一些 getter 来检索各种形式的状态，以及一些突变来修改所述状态。但是，当涉及到操作时，我对作为参数传递给操作的主机对象执行某些异步请求。例如，可以启用或禁用主机。因此，我有一个 action hostEnable(host)，它调用 Axios GET 请求，该请求仅以 OK (200) 响应。

const getDefaultState = () => {
    return {
        host: {...}
    }
};

export const state = getDefaultState();

const getters = {
    getHost: (state) => {
        return state.host;
    },
    ...
};

const mutations = {
    setHost: (state, host) => {
        state.host = host;
    },
    ...
};

const actions = {
    fetchHost ({commit}, hostId) => {
    api.get(hostId)
        .then(({data}) => {
            commit(setHost, data);
        })
        .catch(error => {
            throw new Error(error);
        });
    },
    createHost: ({state}) => {
        return api.create(state.host);
    },
    hostEnable: (context, host) => {
        return api.enableHost(host);
    },
    ...
};

export default {
    state,
    getters,
    actions,
    mutations
};

以这种方式使用 Vuex 存储是否可以，或者所有操作都必须使用或修改存储状态？

标签： javascriptvue.jsvuex

以这种方式使用 Vuex 存储是否可以，或者所有操作都必须使用或修改存储状态？

在这种情况下，是的，它非常好，不，它不需要修改任何东西。

即使它不会以 Vuex 操作的预期工作方式运行（因为从技术上讲，操作应该以某种方式与突变一起工作），您可以将其定义hostEnable为操作，因为将所有Host相关业务分组更有意义将逻辑放在一个模块中，而不是将其放在代码库中的其他位置。

所以，是的，您可以使用它来执行异步操作，而无需对您的存储数据提交任何突变，因为它还负责在您的应用程序中包含复杂的业务逻辑。

最后，使用异步逻辑是构建 Vue 应用程序actions时的高级原则之一。

应用程序级状态集中在存储中。

改变状态的唯一方法是提交突变，这是同步事务。

异步逻辑应该被封装在里面，并且可以由 动作组成。

javascript - Vuex 动作是否必须修改或使用 store 状态？

问题描述

解决方案

推荐阅读