一.vuex数据为什么要持久化？
因为vuex是基于内存，存在内存中的，当网页刷新之后就没有了，不会持久化储存
二.vuex持久化实现方案
1. 使用 vuex-persistedstate
<1> 安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化
npm i vuex-persistedstate -S
注意: 该插件应是生产依赖包, 所以要 -S
在package.json中
<2> 配置store
在src/store 文件夹下新建 index.js文件
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> 在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. 利用localStorage或sessionStorage
<1>新建一个vuexPersist.js文件（其实就是方案一插件的封装）
// 从本地存储中获取数据
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>在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>测试效果
<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>
其他方案
使用后端 API：如果你的应用程序需要持久化的数据与后端服务器进行交互，你可以在 Vuex 的 store 中添加异步操作，将数据发送到后端 API 进行存储。当应用程序初始化时，你可以从后端 API 获取数据并更新 Vuex 的状态。
使用 IndexedDB：IndexedDB 是浏览器提供的一种高级本地数据库解决方案。你可以使用 IndexedDB 来存储和检索 Vuex 数据。你可以在 Vuex 的 store 中编写适用于 IndexedDB 的逻辑，并在应用程序初始化时从 IndexedDB 加载数据。