VUEX 每次请求改变数组数据

Question

我有一些来自 API 的数据，我存储在 VUEX 中，然后显示在 UI 中。在初始页面加载时，有一个请求会拉入初始数据并显示。一切正常。我的问题是，当我现在使用事件处理程序为另一个请求提交表单输入时，我只是推送到数组并将其添加到数组（这是有道理的）并在我不想要的当前数据下方创建另一个实例。有没有办法实际更改/改变数组中的当前数据并用新值更新 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"

Answer 1

如果您的 ipData 是对象数组，您可以创建另一个突变来更新您的数组（使用 id 或其他标识符来匹配正确的对象）：

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

VUEX 每次请求改变数组数据

VUEX mutate array data each request

javascript

vue.js

vuex

vuejs3