vuex实现数据持久化 vuex-persistedstate或localStorage实现

男娘i 2023-06-25 03:01 57阅读 0赞

**vuex数据的持久化 vuex-persistedstate或localStorage实现**

之所以会有vuex持久化这个方法就是因为在存入vuex中的时候，如果刷新页面的时候vuex中的数据就会消失，因为它是存在本地内存中的， 但是我们又不希望刷新数据的丢失，所以就有了数据持久化 下面是代码

第一种：用插件 vuex-persistedstate  
下载插件

咋这里还又一个坑 ，就是存入vuex的时候不要用this. s t o r e . s t a t e . 数 据 名 去 存 值 第 一 次 可 以 存 进 去 但 是 刷 新 的 时 候 不 会 实 现 持 久 化 ， 我 也 不 知 道 为 什 么 ， 最 后 我 用 了 ∗ ∗ t h i s . store.state.数据名 去存值 第一次可以存进去 但是刷新的时候不会实现持久化，我也不知道为什么，最后我用了\*\* this. store.state.数据名去存值第一次可以存进去但是刷新的时候不会实现持久化，我也不知道为什么，最后我用了∗∗this.store.commit(“setUserNames”)\*\* （setUserNames是mutations中的方法）去触发的保存在vuex中就可以了

npm install vuex-persistedstate --save

在store.js中引入

import Vue from 'vue'
    import Vuex from 'vuex'
    //引入插件
    import createPersistedState from "vuex-persistedstate";
    Vue.use(Vuex)
    export default new Vuex.Store({
      state: {
        userNames:"",
        count: 0
      },
      mutations: {
        setUserNames(state){
          state.count++
        }
      },
      actions: {
      },
      modules: {
      },
      // 会自动保存创建的状态
      //默认存储到localStorage  
      plugins: [createPersistedState()]
    })

**默认存储到localStorage  
想要存储到sessionStorage，配置如下**  
在这里只写出了  
plugins: \[createPersistedState()\] 的配置 其他的配置和上面的都一样

plugins: [createPersistedState({
      storage: window.sessionStorage
     })]

**存在cookie中时 plugins的配置如下**

plugins: [
        persistedState({
          storage: {
            getItem: key => Cookies.get(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
            removeItem: key => Cookies.remove(key)
          }
        })
      ]

\*\*指定某个需要持久化的数据 \*\*

plugins: [createPersistedState({
    	  storage: window.sessionStorage,
    		  reducer(value) {
    		   return {
    		   // 只储存state中的goodList
    		   assessmentData: value.goodList
    		  }
    	  }
     })]

**plugins要是一个一维数组不然会解析报错**  
实现之后会在localStorage 中生成一个key值，默认是vuex，可以去设置配置plugins就可以

下面是我的一个实现，我用的默认值，保存在localStorage 中建值也是默认的vuex

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70]

第二种 存入localStorage

localStorage.setItem(“key”,value);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191224205738473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxOTAyNzM3MDA3,size_16,color_FFFFFF,t_70