Question

我很难做到这一点，我敢肯定这很简单，但我无法使其正常工作。我有一个带有布尔值的切换开关，可以成功地从Vue文件中使它工作，但是显然vuex大喊大叫，因为任何prop更改都需要在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;
  }
}

从VUEX中的突变中突变出特定状态

1 个答案: