Question

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

我有一家Vuex商店。我们称它为主机。它包含一个对象作为其状态，其中一些吸气剂可检索状态的各种形式，以及一些用于修改该状态的突变。但是，当涉及到动作时，我会对主机对象执行某些异步请求，这些请求将作为参数传递给动作。例如，可以启用或禁用主机。因此，我有一个操作enableHost(host)，该操作调用一个仅以OK（200）响应的Axios GET请求。

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相关的业务逻辑分组在一个模块中比将其放在代码库中的其他位置更有意义。

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

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

应用程序级别状态集中在商店中。



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



异步逻辑应该封装在其中，并且可以与之组合   操作。

Answer 2

关键概念：

状态将存储您的数据。

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

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

Getters 是要获取数据并对其进行突变（例如，从加拿大获取包含ip的主机，依此类推）

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

2 个答案: