VUEX는 각 요청마다 어레이 데이터를 변환합니다.

VUEX는 각 요청마다 어레이 데이터를 변환합니다.

저장 중인 API의 데이터가 있습니다.VUEXUI에 표시할 수 있습니다.초기 페이지 로드 시 초기 데이터를 가져와서 표시하는 요청이 있습니다.모든 것이 잘 작동합니다.문제는 이벤트 핸들러를 사용하여 다른 요청에 대한 양식 입력을 제출할 때 어레이에 푸시하고 어레이에 추가하는 경우(이 경우) 현재 데이터 아래에 원하지 않는 다른 인스턴스가 생성된다는 것입니다.어레이에 있는 현재 데이터를 실제로 변경/변조하고 UI를 새 값으로 업데이트할 수 있는 방법이 있습니까?

가게

import { createStore } from 'vuex';
import axios from 'axios';

    export default createStore({
      state: {
        ipData: [],
        currentIP: '',
      },
      mutations: {
        SET_CURRENT_IP(state, currentIP) {
          state.currentIP = currentIP;
        },
        SET_IP_DATA(state, ipData) {
          state.ipData.push(ipData);
        },
      },
    });

양식 제출

 methods: {
    async submitForm() {
      const isFormValid = await this.v$.$validate();
      if (!isFormValid) return;

      axios
        .get(`${this.url}${this.getIP}`, {
          headers,
        })
        .then((response) => {
          this.$store.commit('SET_IP_DATA', response.data);
        })
        .catch((error) => {
          console.log(error.response);
        });
    },
  },

VUEX 개체:

ipData:Array[1]
0:Object
as:Object
domains:Array[5]
ip:"8.8.8.8"
isp:"Google LLC"
location:Object
city:"Mountain View"
country:"US"
geonameId:5375480
lat:37.38605
lng:-122.08385
postalCode:"94035"
region:"California"
timezone:"-07:00"

만약 당신이ipData개체의 배열입니다. 배열을 업데이트하기 위해 다른 변환을 생성할 수 있습니다(오른쪽 개체와 일치하도록 ID 또는 다른 식별자 사용).

UPDATE_IP_DATA(state, payload) {
  state.ipData = [
   ...state.ipData.map((item) =>
      item.id !== payload.id
        ? item
        : {
          ...item,
          ...payload,
        }
     ),
  ];
}

언급URL : https://stackoverflow.com/questions/71889004/vuex-mutate-array-data-each-request