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

使用Vuex存储操作执行相关的异步操作（例如获取请求）而不实际修改存储的状态是否是一种良好的做法

我有一家Vuex商店。我们叫它主人吧。 它包含一个对象作为其状态，一些getter用于检索各种形式的状态，以及一些用于修改所述状态的变体。 但是，在操作方面，我对主机对象执行某些异步请求，并将其作为参数传递给操作。例如，可以启用或禁用主机。

---

一、 因此，有一个操作

hostEnable（host）

，该操作调用一个Axios GET请求，该请求只响应OK（200）

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

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

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

即使如此，它也不会以Vuex操作预期的方式工作（因为从技术上讲，操作应该以某种方式与突变一起工作），您可以将

hostEnable

定义为一个操作，因为将所有

hoste

相关业务逻辑分组到一个模块中比将其放在代码库的其他地方更有意义。

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

最后，对异步逻辑使用

操作

，这是一个高级原则

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

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

异步逻辑应该封装在中，并且可以与 行动。

关键概念：

状态用于存储数据

突变用于处理数据的同步操作

操作用于处理异步操作（这就是为什么您将

上下文

对象改为

状态

作为参数）

---

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

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

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
};