我可以在 Vuex 中用一个突变设置多个状态参数吗？

Question

我有一个包含多个状态参数的商店，一些（不是全部！）应该重置为它们的初始值。

我想知道我是否可以通过一个 mutation 来更改 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

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

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 2

突变可以访问整个状态对象，如果需要，您可以突变（初始化、设置、清除）整个状态..

Answer 3

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

这可以节省您的时间
这可以让您免于输入多行代码
这可以很好地模拟您的应用程序

最后一点是什么意思？而不是执行此操作的操作：

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

这会导致更简单的动作（我通常看到它会变成复杂的野兽），以及稍微复杂的突变（通常做的很少，并且使突变层比它需要的更无用）。

我可以在 Vuex 中用一个突变设置多个状态参数吗？

can I set several state params with one mutation in Vuex?

vue.js

vuex