Cómo restablecer todos los estados de vuex (personalizable)
Entonces, esto involucra múltiples métodos:
1. Actualización de página:
window.location.reload()
Este método determina la optimización u optimización lógica mediante el enrutamiento. Siempre actualizando la página durante. La carga provocará una mala experiencia de usuario y una carga innecesaria para el navegador, así que lo dejé después de intentarlo.
2. Escriba un método de reinicio y luego llame a
actions.resetVuex = function() {
store.commit(state.a, null)
p>store.commit(estado.b, nulo)
store.commit(estado.c, nulo)
...
}
store.dispatch('resetVuex')
De esta manera, habrá múltiples módulos y múltiples estados. Debe agregar varios manualmente, lo cual es una carga de trabajo enorme y un inconveniente. mantener, la situación es aún peor si nuestro estado es inicialmente una serie de objetos. Cuando inicialmente hicimos una copia profunda, también necesitábamos operarla y encapsularla en cada módulo.
Ambos métodos pueden resolver el problema, pero todavía no usé estos dos métodos porque sentí que había sacrificado. Algunas cosas para lograr el objetivo. A través de mi práctica repetida, descubrí el siguiente método:
Primero, cuando se carga la página, el almacenamiento se carga primero. Al introducir una tienda, se debe inicializar todo el estado de la tienda, por lo que crearé un caché local para registrar:
Aquí, uso el complemento de la tienda (referencia/nbubna/store)
Antes de crear la instancia de vue en main.js:
importar _ store desde 'store'
importar createStore desde '.
...
const store = createStore() //La biblioteca vuex que creé
_store({initState: store.state}) //Caché El estado inicial llamado initState
Sabemos que main.js se ejecutará una vez cuando se cargue la página.
Luego, el initState almacenado en caché es el estado en el almacenamiento que creamos al principio
(que contiene todos los estados en el módulo);
Luego, escribimos un método de mutación globalmente al crear el almacenamiento
Aquí, usé el complemento de almacenamiento (referencia/nbubna/store)
Aquí, usé el complemento lodash (referencia/)
Import_store de "lodash"
Import_store de "store2"
...
const store = new Vuex.Store({
p >estado: {
token: ''
},
mutaciones: {
resetAllState (estado, carga útil) {
if (payload exampleof Array === false) { // verificar que el pase sea un array
return
}
const initState = _store('initState') // recupera el caché de los valores iniciales
const _initState = payload.length ?_.omit(initState, payload): initState // Determina si hay datos en el valor entrante, si hay datos, obtenga el valor correspondiente
_.extend(state, _initState)
}
},
módulos: {
...
}
})
El método de mutación llamado resetAllState reemplaza el estado global con nuestro estado en caché.
¿Por qué la carga útil aquí es una matriz?
Debido a que esto es lo que se describe en el título como personalizable, si la página restablece la mayor parte de su estado pero necesita conservar parte, podemos excluir ese estado de la actualización utilizando el valor de estado que pasamos.
Por supuesto, también podemos pasar el valor para actualizar el valor correspondiente sin actualizar todos los demás valores (no se explica en detalle aquí)