Мутация указанного c состояния из мутации в VUEX

Question

Мне трудно это делать, и я уверен, что это просто, но я не могу заставить его работать. У меня есть тумблер с логическим значением, что я успешно заставляю его работать из файла Vue, но, очевидно, vuex кричит, потому что любое изменение пропа должно быть изменено в файле vuex. Вот соответствующий код:

Vue файл

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

Файл vuex упрощенный

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

Ошибка: [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций.

Схема API

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

Как вызвать изменение в свойстве close в пределах свойства мутация? Заранее спасибо

Answer 1

Вместо передачи нового объекта в действие, передайте весь объект workstation.

this.updateWorkstation(workstation);

Вы создадите объект публикации postdata внутри действия, и вы совершить вторую мутацию для переключения, когда обещание разрешается:

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

Поскольку workstation находится в действии таким образом, вы можете вызвать эту вторую мутацию для переключения свойства closed:

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