Vuex 操作是否必须修改或使用存储状态？

Question

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

我有一个 Vuex 商店。我们称其为主机吧。它包含一个对象作为其状态，并带有一些获取器来检索各种形式的状态以及一些突变来修改所述状态。但是，当涉及到操作时，我会对主机对象执行某些异步请求，并将这些请求作为参数传递给操作。例如，可以启用或禁用主机。因此，我有一个 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 存储是否可以，或者所有操作都必须使用或修改存储状态？

Answer 1

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

在这种情况下，是的，它完全没问题，不，它不需要修改任何东西。

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

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

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

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

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

3. 异步逻辑应该封装在动作中，并可以与 动作组合在一起。