Vue 63 ，Vuex状态、数据持久化（Vue2、Vue3状态数据持久化）

前言

Vuex是一个仓库，是vue的状态管理工具，存放公共数据，任何组件都可以使用vuex里的公共数据。Vuex提供了插件系统，允许我们使用 vuex-persistedstate插件，将Vuex的状态持久化到本地存储中，解决页面刷新或重新打开应用时状态丢失的问题，这里分享Vuex数据持久化的几种实现方案。

一. 基本使用

Vuex的五大核心属性及调用，请看

1. 核心属性

 //1、state存放状态和数据
 state: {
    flag: 0,
  },

  //2、mutations修改状态和数据
  mutations: {
    defineTest(state, i) {
      state.flag = i;
    }
  },

  //3、getters计算属性
  getters: {
  },

  //4、actions异步操作
  actions: {
  },

  //5、modules模块化
  modules: {
  },

  //6、持久化插件
  plugins: [
     vuexPersistedState({
       storage: window.localStorage, // 指定存储引擎  
     }),
  ],

2. 函数调用

 //state的调用方式 1
 computed: {  
    ...mapState(['flag']) // 将 this.$store.state.count 映射为组件内的 count 计算属性  
 },
 <div>{{ flag }}</div>   
 
 //state的调用方式 2
 <div v-if="this.$store.state.flag">测试数据</div>


 //mutations的调用方式 1
 methods: {  
   // 将 this.increment() 映射为this.$store.commit('increment')      
   ...mapMutations(['increment']),  
   // 触发事件
   this.increment();
 }  
 
 //mutations的调用方式 2
 this.$store.commit('defineTest', i)

 //actions的调用方式
 this.$store.dispatch('someAction', payload);

---

二. Vue2

Vue2中，Vuex状态、数据持久化。

1. 手写实现

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

① 新建文件

新建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);
    }
}

② 引入挂载

在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;

---

2. db函数

通过手写db函数方法，实现数据、状态持久化。

① 新建文件

新建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;

② 引入使用

在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

③ 组件调用

组件中调用SET_STATE1方法，并传值data，请看

methods: {
    choseBtn(){
      this.$store.commit("SAVE_DOTS", this.data);
    }
},

④ 全局挂载

或者使用全局引入，然后挂载在Vue原型上使用

// 直接在main.js中引入挂载后使用
import db from "@/store/localStorage";
Vue.prototype.$db = db;


// 调用
this.$db.get("test");

3. 插件实现

通过Vue插件，vuex-persistedstate 或 vuex-plugin-persistedstate实现数据、状态持久化。

① 安装依赖

npm install vuex-persistedstate --save  
//或者  
cnpm install vuex-persistedstate --save 
//或者
yarn add vuex-persistedstate

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

//查看插件的依赖项
npm ls vuex-persistedstate

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

② 引入使用

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  
    }),  
  ],  
});

③ 注意事项

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

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

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

持久化部分状态，请看

createPersistedState({  
  storage: window.localStorage,  
  // 只持久化这些路径下的状态  
  paths: ['some', 'partial', 'state'] 
})

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

---

三. Vue3

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

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

Pinia官网https://pinia.vuejs.org/zh/

创作不易，感觉有用，就一键三连，感谢(●'◡'●)