Tengo algunos datos de una API que almaceno en VUEX y luego los muestro en la interfaz de usuario. En la carga de la página inicial, hay una solicitud que extrae los datos iniciales y los muestra. Todo funciona bien. Mi problema es que cuando ahora envío una entrada de formulario para otra solicitud usando un controlador de eventos, solo estoy presionando la matriz y se está agregando a la matriz (lo que tiene sentido) y crea otra instancia debajo de los datos actuales que no quiero. ¿Hay alguna manera de CAMBIAR / MUTAR los datos actuales que están en la matriz y actualizar la interfaz de usuario con los nuevos valores?
TIENDA
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); }, }, });ENVIAR FORMULARIO
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); }); }, },OBJETO 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"Si su ipData es una matriz de objetos, puede crear otra mutación para actualizar su matriz (use id o algún otro identificador para que coincida con el objeto correcto):
UPDATE_IP_DATA(state, payload) { state.ipData = [ ...state.ipData.map((item) => item.id !== payload.id ? item : { ...item, ...payload, } ), ]; }