Tengo una Vuex Store donde necesito restablecer las variables en función de algunos cambios dentro de la aplicación, así que estoy usando algo como esto y todo funciona como se esperaba:
const getDefaultState = () => { return { showModal: false, nodeCounter:0, nodeInfo: [], } } export const state = () => getDefaultState() export const mutations = { resetState (state) { // Reset all state variables to its default value for next node Object.assign(state, getDefaultState()) }, } Sin embargo, según el nuevo requisito, no deseo restablecer el nodeCounter y quiero que tenga el valor incremental, pero reset todos los demás valores, así que me gustaría hacer algo como esto:
const getDefaultState = () => { return { showModal: false, nodeInfo: [], } } export const state = () => { nodeCounter:0, getDefaultState() } Entonces, todos mis otros valores se reset , pero el contador de nodeCounter se restablecerá solo cuando actualice la aplicación. Pero soy incapaz de lograr esto.
¿Puede alguien decirme cómo puedo restablecer algunas de las variables de state y no restablecer algunas de ellas? No deseo restablecer la variable de estado una por una, así que estoy usando el enfoque de function como se menciona en algunas de las respuestas aquí.
Intentaría guardar el estado de nodeCounter (que desea conservar) y luego configurarlo, después de configurar el estado por defecto. Algo como esto:
const getDefaultState = () => { return { showModal: false, nodeCounter:0, nodeInfo: [], } } export const state = () => getDefaultState() export const mutations = { resetState (state) { // Reset all state variables to its default value for next node const tmpNodeCounter = state.nodeCounter; state = {...getDefaultState(),nodeCounter: tmpNodeCounter}; }, }Si desea restablecer solo algunos valores en el estado con una mutación, no necesita incluir todas las variables de estado en su mutación resetState . podría definir otro objeto para las variables que deben restablecerse cada vez. aquí está mi archivo de tienda Nuxt llamado change.js :
const getDefaultState = { showModal: false, nodeCounter:0, nodeInfo: [], } const alwaysReset = { showModal: false, nodeInfo: [], } export const state = () => (getDefaultState); export const mutations = { resetState (state) { // Reset state variables that must be reset each time and not all state Object.assign(state, alwaysReset); }, increment (state) { console.log(state.nodeCounter); state.nodeCounter++; }, pushArr (state) { console.log(state.nodeInfo); state.nodeInfo.push("item"); } } El objeto alwaysReset solo incluye variables que desea restablecer cada vez. se crearon otras mutaciones para probar mi respuesta con esta página de Nuxt, por ejemplo:
<template> <v-container fluid> <v-row> <v-col> <v-card class="pa-2" outlined tile > <div>this is a page</div> <v-btn @click = "changeState">click</v-btn> <v-btn @click = "incrementState">increment</v-btn> <v-btn @click = "arrayState">push</v-btn> </v-card> </v-col> </v-row> </v-container> </template> <script> export default { methods: { changeState: function() { this.$store.commit('change/resetState'); }, incrementState: function() { this.$store.commit('change/increment'); }, arrayState: function() { this.$store.commit('change/pushArr'); } } } </script> Aquí creé 3 botones. uno de ellos restablece las variables especificadas. otro incrementa el nodeCounter para ver que con reset este estado no cambia. finalmente, el tercero empuja elementos a la variable nodeInfo para ver que este estado se restablecerá cada vez.