一、通过手写函数和plugins，实现状态、数据持久化话；

1、新建pluginPersist.js文件，并导出存储函数

/**

*

* @param {状态、数据持久化} store

*/

export default function (store) {

// console.log(store);

// 存

const KEY = 'VUEX:STATE';

//这里表示 页面关闭 或 刷新 时存储

window.addEventListener("beforeunload", () => {

localStorage.setItem(KEY, JSON.stringify(store.state))

})

// 取

try {

const state = JSON.parse(localStorage.getItem(KEY));

if (state) {

store.replaceState(state);

}

} catch (err) {

console.log(err);

}

}

2、在store中，在plugins里引入挂载使用；plugins插件中的函数会在创建仓库时执行，插件的本质就是一个函数

import Vue from 'vue'

import Vuex from 'vuex'

import pluginPersist from "./pluginPersist"

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

// ...状态、数据

},

mutations: {

// ...修改状态、数据

},

actions: {

// ...动作函数

},

getters: {

// ...计算属性

},

modules: {

// ...模块化

},

//这里使用

plugins: [pluginPersist],

})

export default store;

二、通过手写db对象方法，实现数据、状态持久化；

1、新建localStorage.js文件，创建db对象，然后导出db方法

var localStorage = window.localStorage;

const db = {

/**

* 更新状态

*/

save(key, value) {

// console.log(key, value);

// 页面关闭或刷新时存储

// window.addEventListener("beforeunload", () => {

// localStorage.setItem(key, JSON.stringify(value))

// })

// 触发该事件时存储 二选一

localStorage.setItem(key, JSON.stringify(value));

},

/**

* 获取状态，如果有状态值，获取最新状态值；如果没有，获取默认值

*/

get(key, getSaveVal = null) {

// console.log(key, getSaveVal);

try {

return JSON.parse(localStorage.getItem(key)) || getSaveVal;

} catch (err) {

console.log(err);

}

},

/**

* 移除状态

*/

remove(key) {

// console.log(key);

localStorage.removeItem(key);

},

/**

* 清空状态

*/

clear() {

localStorage.clear();

}

};

export default db;

2、在store中引入使用

import Vue from 'vue'

import Vuex from 'vuex'

import db from './localStorage';

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

// 初始化时 默认获取

state1: db.get('STATE1') || null,

},

mutations: {

SET_STATE1: (state, value) => {

state.state1++

//调用SET_STATE1方法时 这里存储

db.save('STATE1', state.state1);

},

},

actions: {

// 动作函数

},

getters: {

// 计算属性

},

modules: {

// 模块化

},

// 插件

plugins: [],

})

export default store

3、组件中调用SET_STATE1方法，并传值data

methods: {

choseBtn(){

this.$store.commit("SAVE_DOTS", this.data);

}

},

三、通过vue插件vuex-persistedstate 或 vuex-plugin-persistedstate实现数据、状态持久化；

1、安装依赖

npm install vuex-persistedstate --save

//或者

cnpm install vuex-persistedstate --save

//或者

yarn add vuex-persistedstate

--save是安装在生产环境，开发和生产都需要用到

//查看插件的依赖项

npm ls vuex-persistedstate

Tips：vuex-persistedstate 和 vuex-plugin-persistedstate 是同一个插件的不同引用方式，它们都是用来持久化 Vuex 状态管理的插件，可以将 Vuex 中的状态保存到本地存储（如 localStorage 或 sessionStorage）中，以便在刷新页面或重新打开应用时恢复这些状态；persist目前已经弃用；

2、引入使用

import Vue from 'vue';

import Vuex from 'vuex';

import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({

state: {

// ...你的状态定义

},

mutations: {

// ...你的变更函数定义

},

actions: {

// ...你的动作函数定义

},

getters: {

// ...你的计算属性定义

},

modules: {

// ...模块化

},

plugins: [

createPersistedState({

storage: window.localStorage, // 或者使用 sessionStorage

}),

],

});

3、注意事项：

createPersistedState 函数创建了一个插件实例；

可以将存储选项（如 localStorage 或 sessionStorage）作为参数传递给它，插件默认使用 localStorage，但是可以根据需要选择其他存储方式；

vuex-persistedstate 插件默认会持久化 Vuex 中的所有状态，如果你只想持久化部分状态，可以通过配置插件的 paths 选项来实现

createPersistedState({

storage: window.localStorage,

// 只持久化这些路径下的状态

paths: ['some', 'partial', 'state']

})

在上面的配置中，只有 state.some/partial/state 路径下的状态会被持久化；其它状态在页面刷新或重新加载时不会得到恢复。

⭐Vue3中，Vuex状态、数据持久化，

Vue3中的数据、状态持久化，可以通过Pinia插件实现，是vue3官方指定的持久化实现方案，地址在这：

Pinia官网

https://pinia.vuejs.org/zh/