1. ¿Por qué es necesario conservar los datos de vuex?
因为vuex是基于内存，存在内存中的，当网页刷新之后就没有了，不会持久化储存
2. plan de implementación de persistencia de vuex
1. Utilice el estado persistente de vuex
<1> Instale un complemento de vuex, vuex-persistedstate, para admitir la persistencia del estado de vuex
npm i vuex-persistedstate -S
Nota: Este complemento debe ser un paquete de dependencia de producción, por lo que necesita -S
en package.json
<2> Configure la tienda
para crear un nuevo archivo index.js en la carpeta src/store
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
const config = {
state: {
isLogin: false,
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
dict
},
plugins: [
createPersistedstate()
],
}
const store = new Vuex.Store(config);
export default store;
<3> Introducido en main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import store from "./store/index";
Vue.config.productionTip = false;
new Vue({
store,
router,
render: h => h(App)
}).$mount("#app");
2. Utilice almacenamiento local o almacenamiento de sesión
<1>Cree un nuevo archivo vuexPersist.js (en realidad, la encapsulación del complemento para la solución uno)
// 从本地存储中获取数据
function getState(key) {
try {
const serializedState = localStorage.getItem(key);
if (serializedState === null) {
return undefined;
}
return JSON.parse(serializedState);
} catch (err) {
console.error('Error loading state from localStorage:', err);
return undefined;
}
}
// 将数据保存到本地存储中
function saveState(key, state) {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem(key, serializedState);
} catch (err) {
console.error('Error geting state to localStorage:', err);
}
}
// Vuex 数据持久化插件
export function createPersistedState(key) {
return (store) => {
// 初始化时从本地存储中加载状态
const savedState = getState(key);
if (savedState) {
store.replaceState(savedState);
}
// 监听 Vuex state 的变化并保存到本地存储中
store.subscribe((mutation, state) => {
saveState(key, state);
});
};
}
<2>Introducido en el archivo store/index.js
import Vue from "vue";
import Vuex from "vuex";
import {
createPersistedState } from './vuexPersist';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name: '张三'
},
getters: {
},
mutations: {
updateName (state, payload) {
state.name = payload;
},
},
actions: {
},
modules: {
},
plugins: [
createPersistedState('storageData')
]
});
<3>Efecto de prueba
<template>
<div class="about">
<h1>{
{
name }}</h1>
<span @click="changeName">change</span>
</div>
</template>
<script>
import {
mapState } from "vuex"
export default{
data(){
return{
}
},
computed:{
...mapState(['name'])
},
methods:{
changeName(){
this.$store.commit('updateName', {
name: '李四', age: 24, sex:'男'})
}
}
}
</script>
Otras opciones
: utilice la API de backend: si su aplicación necesita datos persistentes para interactuar con el servidor de backend, puede agregar operaciones asincrónicas en la tienda Vuex para enviar los datos a la API de backend para su almacenamiento. Cuando la aplicación se inicializa, puede obtener datos de la API de backend y actualizar el estado de Vuex.
Uso de IndexedDB: IndexedDB es una solución de base de datos nativa avanzada proporcionada por el navegador. Puede utilizar IndexedDB para almacenar y recuperar datos de Vuex. Puede escribir lógica para IndexedDB en la tienda Vuex y cargar datos desde IndexedDB cuando se inicializa la aplicación.