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

【问题标题】：Do Vuex actions have to modify or use the store state?Vuex 动作是否必须修改或使用 store 状态？
【发布时间】：2019-06-05 07:10:15
【问题描述】：

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

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

【问题讨论】：

“调用 Axios GET 请求” - 我假设您的意思是“PUT”
@halfpad 在这种情况下它是一个 GET 请求 - 事后看来它应该是一个 PUT 请求。

标签： javascript vue.js vuex

【解决方案1】：

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

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

尽管，它不会像 Vuex 动作那样工作（因为从技术上讲，动作应该以某种方式与突变一起工作），你可以将 hostEnable 定义为动作 因为将所有与Host 相关的业务逻辑分组到一个模块中比将其放在代码库中的其他位置更有意义。

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

最后，将actions 用于异步逻辑是structuring your Vue application 时的高级原则之一。

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

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

异步逻辑应该封装在里面，可以和组合 行动。

【讨论】：

【解决方案2】：

关键概念：

状态用于存储您的数据。

Mutations 用于处理对您数据的同步操作。

Actions 用于处理异步操作（这就是为什么您会收到 context 对象而不是 state 作为参数）

Getter是获取数据并对其进行变异（即从加拿大获取包含ip的主机，等等）

【讨论】：