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

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

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

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

咋这里还又一个坑 ，就是存入vuex的时候不要用this.$store.state.数据名去存值第一次可以存进去但是刷新的时候不会实现持久化，我也不知道为什么，最后我用了\ast \ast 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

第二种 存入localStorage

localStorage.setItem(“key”,value);