我可以用Vuex中的一个突变设置几个状态参数吗

Question

我有一个包含多个状态参数的存储，其中一些(不是全部！(应该重置为初始值。

我想知道我是否可以用一个突变来更改vuex中的几个键，或者这是一种糟糕的做法？

所以看起来是这样的：

const store = new Vuex.Store({
state: {
a: 0,
b: 2,
c: 1,

z: 0
},
mutations: {
RESETALL: (state) => {
state.a = 0;
state.b = 2;
...
state.z = 0;
},

Answer 1

简短的回答是是。您可以并且应该在单个突变中更改多个状态参数。

• 这样可以节省时间
• 这样就不用输入很多行代码
• 这以一种很好的方式为您的应用程序建模

最后一点是什么意思？而不是这样做的行动：

async loadData() {
commit("setLoading", true);
commit("setData", []);
commit("setError", "");
const newData = await axios.get("/data");
commit("setData", newData);
commit("setLoading", false);
}

你可以有一个动作来表达它在做什么以及为什么：

async loadData() {
commit("loadingData");
const newData = await axios.get("/data");
commit("applyNewlyLoadedData", newData);
}

突变看起来像：

loadingData = (state) => {
state.loading = true;
state.data = [];
state.error = "";
},
applyNewlyLoadedData = (state, payload) => {
state.data = payload;
state.loading = false;
},

这导致了更简单的动作(我通常会看到它成长为复杂的野兽(，以及稍微更复杂的突变(通常作用很小，使突变层比需要的更无用(。

Answer 2

您可以进行初始化、设置、清除等操作，例如：

import Vue from 'vue'
/**
* State for thing
*
* Usage: this.$store.state.thing.*
*/
const defaultState = {
someDefaultProp: true,
foo: null,
bar: null
}
export const state = () => ({
...defaultState
})
/**
* Mutations / Setters
*
* Usage: this.$store.commit('thing/<method name>', payload)
*/
export const mutations = {
/**
* Initialize/hydrate state
*
* Usage: this.$store.commit('thing/init', {id: 123})
*
* @param {Object} state
* @param {Object} data
*/
init (state, data) {
// hydrate passed vars
for (const i in data) {
Vue.set(state, i, data[i])
}
},
/**
* Set single state item
*
* Usage: this.$store.commit('thing/set', {key: 'id', value: 123})
*
* @param {*} state
* @param {*} param1
*/
set (state, {
key,
value
}) {
Vue.set(state, key, value)
},
/**
* Clear state, set to null
* @param {*} state
*/
clear (state) {
// set all to null
for (const i of Object.keys(state)) {
state[i] = typeof defaultState[i] === 'undefined' ? null : defaultState[i]
}
}
}

然后使用类似：

• 初始化：this.$store.commit('thing/init', {foo: 123, bar:'baz'})
• 集合：this.$store.commit('thing/set', {key: 'bar', value: 'boo'})
• 清除this.$store.commit('thing/clear')

Answer 3

Mutation可以访问整个状态对象，如果需要，可以对整个状态进行Mutation(init、set、clear(。。