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