VUEX의 변환으로 특정 상태 변환

VUEX의 변환으로 특정 상태 변환

이거 하느라 너무 힘들고 간단할 것 같은데 작동이 잘 안 돼요.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,
            }
          ]
        }
      ]
    }
  ]
}

돌연변이 내 근접한 성질에 변경을 가하려면 어떻게 해야 합니까?잘 부탁드립니다

새 개체를 작업에 전달하는 대신 전체 개체 전달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;
  }
}

언급URL : https://stackoverflow.com/questions/60857023/mutating-a-specific-piece-of-state-from-the-mutation-in-vuex