Vuex에서 한 번의 작업으로 두 가지 상태 관리

Vuex에서 한 번의 작업으로 두 가지 상태 관리

2개의 API가 2개의 데이터 세트(락박스 및 워크스테이션)를 보고하고 있습니다.lockboxes API에는 조작이 필요한 recordId를 가진 에이전시 컬렉션이 있습니다.워크스테이션 API는 body의 lockbox.recordId와 workstation.recordId를 백엔드로 전송함으로써 이들 에이전시(락박스) 중 하나를 워크스테이션에 할당하는 메인 컬렉션입니다.

저희 가게는 이렇게 생겼어요.

import { axiosInstance } from "boot/axios";

export default {
  state: {
    lockboxes: [],
    workstation: []
  },

  getters: {
    allLockboxes: state => {
      return state.lockboxes;
    },
    singleWorkstation: state => {
      let result = {
        ...state.workstation,
        ...state.lockboxes
      };
      return result;
    }
  },

  actions: {
    async fetchLockboxes({ commit }) {
      const response = await axiosInstance.get("agency/subagency");
      commit("setLockboxes", response.data.data);
    },
    updateAgency: ({ commit, state }, { workstation, lockboxes }) => {
      const postdata = {
        recordId: state.workstation.recordId,
        agency: state.lockboxes.recordId
      };

      return new Promise((resolve, reject) => {
        axiosInstance
          .post("Workstation/update", postdata)
          .then(({ data, status }) => {
            if (status === 200) {
              resolve(true);
              commit("setWorkstation", data.data);
              commit("assignAgency", workstation);

              console.log(state);
            }
          })
          .catch(({ error }) => {
            reject(error);
          });
      });
    }
  },

  mutations: {
    setWorkstation: (state, workstation) => (state.workstation = workstation),
    assignAgency(workstation) { workstation.assign = !workstation.assign},
    setLockboxes: (state, lockboxes) => (state.lockboxes = lockboxes)
  }
};

프로세스:

드롭다운에서 잠금박스를 선택하고 잠금박스를 할당할 워크스테이션의 전환 스위치를 선택하면 잠금박스는 표시되지만 변경은 프런트 엔드에서만 이루어지기 때문에 새로 고침 시 사라집니다.워크스테이션.recordId나 lockboxes.recordId를 내 몸속에서 내가 원하는 대로 넘기지 못하고 있어상태를 읽지 않고 상태(워크스테이션 또는 잠금 상자)의 recordId를 인식하지 않습니다.

console.log가 반환됩니다(미포착(약속) 미정의).

요청은 404ing이며 본문에 빈 페이로드가 있습니다( {} ).

돌연변이조차 발화하지 않고 있다.

템플릿

toggleAssign(workstation) { 
  this.updateAgency(workstation); 
}
 

getter에서 두 상태를 병합하려고 하기 전에 workstation.recordId를 읽는다는 것을 알게 되었습니다만, lockboxes.recordId에 액세스 할 수 없었습니다.어떻게 하면 두 개의 독립된 API에 존재하는 두 개의 상태에 액세스하여 요청 본문에 이러한 값을 전달할 수 있습니까?

추가할 수 있습니다.debugger;대신 당신의 코드로console.log중단점을 만들고 브라우저의 디버깅 도구에 있는 모든 항목을 검사합니다.

매우 혼란스러운 일이 있기 때문에 도와드릴 수 없습니다.

state: {
  lockboxes: [],
  workstation: []
},

둘 다 어레이입니다.

하지만 그 후:

setWorkstation: (state, workstation) => (state.workstation = workstation),
assignAgency(workstation) { workstation.assign = !workstation.assign},

인 것 같다workstation배열이 아닌가?

그리고 이 또한, getters에 있습니다.

singleWorkstation: state => {
  let result = {
    ...state.workstation,
    ...state.lockboxes
  };
  return result;
}

이해가 안 돼요오브젝트를 작성하는 방법...어레이를 인가요?아마도 당신은 다음과 같은 것을 하려고 했겠죠:

singleWorkstation: state => {
  let result = {
    ...state.workstation,
    lockboxes: [...state.lockboxes]
  };
  return result;
}

록박스가 배열이 아니라면?하지만 어레이처럼 이름이 붙여지고 어레이로 선언됩니다.단, 다음과 같은 기능이 있습니다.

const postdata = {
    recordId: state.workstation.recordId,
    agency: state.lockboxes.recordId
};

그럼 배열이 아닌 것 같네요?

마지막으로, 당신의updageAgency여기서 문제가 발생할 수 있습니다.

  return new Promise((resolve, reject) => {
    axiosInstance
      .post("Workstation/update", postdata)
      .then(({ data, status }) => {
        if (status === 200) {
          resolve(true);
          commit("setWorkstation", data.data);
          commit("assignAgency", workstation);

          console.log(state);
        }
      })
      .catch(({ error }) => {
        reject(error);
      });
  });

그.then첫 번째 arg of axios는 상태 코드가 2xx 또는 3xx일 경우에만 호출됩니다.그래서 당신의 테스트는if (status === 200)에러가 발생하지 않기 때문에 불필요한 것입니다.그리고 다른 이유로 200 이외의 유효한 코드를 가지고 있다면 약속은 결코 끝나지 않습니다. reject되지 않습니다. 「」도 아닙니다.resolve따라서 상태 코드의 체크를 해제해야 합니다.

도 해야 요.resolve(true) 번 commits , 전엔......

마지막으로 변환 assignAgency가 모두 잘못되었다고 선언되었습니다.

assignAgency(workstation) { workstation.assign = !workstation.assign},

변환은 항상 상태를 첫 번째 매개 변수로 간주합니다.다음 중 하나가 필요합니다.

assignAgency(state, workstation) { 
    state.workstation = {...workstation, assign: !workstation.assign}
},

또는

assignAgency(state) { 
    state.workstation = {...state.workstation, assign: !state.workstation.assign}
},

.workstation오브젝트 내부의 부울을 토글하기만 하면 됩니다.

TLDR: 잘 모르겠습니다.lockboxes해 주세요.Axios axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi axi 。assignAgency 사용, 「」, 「」debugger;VueJS 크롬 플러그인은 개발 중에 스토어를 확인하는 데 도움이 됩니다.

액션에서는 2개의 오브젝트가 전달됩니다.

async myAction(store, payload)

스토어 오브젝트는 현재 vuex 스토어 전체입니다.그래서 당신이 약속하는 곳에서, 당신은 이와 같은 상태를 얻을 수 있습니다.

async fetchLockboxes({ commit,state }) {//...}

그러면 앱의 모든 상태에 액세스할 수 있습니다.

rootState를 사용하여 전체 상태를 가져오거나 설정할 수 있습니다.

 updateAgency: ({ commit, rootState , state }, { workstation, lockboxes }) {
  rootState.lockboxes=[anything you can set ]
 }

언급URL : https://stackoverflow.com/questions/60916801/managing-two-states-in-one-action-in-vuex