Mutating a specific piece of state from the mutation in VUEX

Question

I'm having a hard time doing this and I'm sure it's simple but I can't get it to work. I have a toggle switch with boolean value that I am successfully making it work from the Vue file but obviously vuex is yelling cause any prop change needs to be mutated in the vuex file. Here is the relevant code:

Vue file

<template>
   <workstation
      v-for="(workstation, index) in hStation.workstations" :key="index"
      :id="workstation.recordId"
      :close="workstation.closed"
      @toggledState="toggleState(workstation)"
      ></workstation>
</template>

<script>
   methods: {
     ...mapActions("pod", ["updateWorkstation"]),
     toggleState(workstation) {
        workstation.closed = !workstation.closed;
        this.updateWorkstation({
           recordId: workstation.recordId,
           closed: workstation.closed
        })
        .then(response => {
            console.log("id: ", workstation.recordId);
            console.log("closed: ", workstation.closed);
        })
        .catch(error => {
            console.log("error: ", error);
        });
     },
   },
</script>

The vuex file simplified

import { axiosInstance } from "boot/axios";

export default {
  namespaced: true,
  state: {
    workstation: []
  },
  getters: {
    singleWorkstation: state => {
      return state.workstation;
    }
  },
  actions: {
    updateWorkstation: ({ commit }, payload) => {
      return new Promise((resolve, reject) => {
        axiosInstance
          .post("Workstation/update", payload)
          .then(({ data, status }) => {
            if (status === 200) {
              resolve(true);
              commit("setWorkstation", data.data);
            }
          })
          .catch(({ error }) => {
            reject(error);
          });
      });
    }
  },
  mutations: {
    setWorkstation: (state, workstation) => (state.workstation = workstation)
  }
};

Error: [vuex] do not mutate vuex store state outside mutation handlers.

API schema

{
  "success": true,
  "data": [
    {
      "recordId": 0,
      "worksite": 0,
      "hStations": [
        {
          "recordId": 0,
          "podId": 0,
          "stationOrder": 0,
          "workstations": [
            {
              "recordId": 0,
              "name": "string",
              "closed": true,
            }
          ]
        }
      ]
    }
  ]
}

How do I fire the change on the close property within the mutation? Thanks in advance

Dan Dan · Accepted Answer · 2020-03-26T02:21:22

Instead of passing a new object to the action, pass the whole workstation object.

this.updateWorkstation(workstation);

You'll create the posting object, postdata, inside the action, and you'll commit a second mutation for toggling when the promise resolves:

updateWorkstation: ({ commit }, workstation) => {
  const postdata = {
    recordId: workstation.recordId,
    closed: workstation.closed
  }
  return new Promise((resolve, reject) => {
    axiosInstance
      .post("Workstation/update", postdata)
      .then(({ data, status }) => {
        if (status === 200) {
          resolve(true);
          commit("setWorkstation", data.data);
          commit("toggleOldWorkstation", workstation);
        }
      })
      .catch(({ error }) => {
        reject(error);
      });
  });
}

Since the workstation is in the action this way, you're able to call that second mutation to toggle the closed property:

mutations: {
  ...
  toggleOldWorkstation(workstation){
    workstation.closed = !workstation.closed;
  }
}

Mutating a specific piece of state from the mutation in VUEX

1 Answers