Vuex状态、数据持久化（vue2、vue3状态数据持久化）

水深无声 2024-04-22 22:30 87阅读 0赞

#### **简介：****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中，Vuex状态、数据持久化** ####

#### **一、通过手写函数和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方法** ####

#### **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官网![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://pinia.vuejs.org/zh/][Pinia_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_pinia.vuejs.org_zh]**

[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[Pinia_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_pinia.vuejs.org_zh]: https://pinia.vuejs.org/zh/