[Vuejs]-Can I set several state params with one mutation in Vuex?

3👍

✅

The short answer is Yes. You can, and should, change multiple state parameters in a single mutation.

this saves you time
this saves you from typing many lines of code
this models your application in a nice way

What do I mean by that last point? Instead of an action that does this:

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

You could have an action that expresses what it’s doing and why:

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

The mutations then look like:

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

This leads to simpler actions (which I typically see grow into complex beasts), and slightly more complex mutations (which typically do very little and make the mutation layer much more useless than it need be).

👤Nathan Strutz

[Vuejs]-How to toggle between two components in vue.js?

1👍

You could make an init, set, clear etc, for example:

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

Then use like: