Vuex以及Vuex持久化

一、Vuex及其持久化

Vuex在Vue项目中，充当着一个很重要的角色，尤其是在大型项目里面，相当于全局的状态存储管理。简单理解，就是全局都可以调用的状态去统一管理数据。——全局管理状态

使用场景：

1. 多个视图依赖同一状态
2. 不同视图变更同一状态
3. 一个状态多个视图共用

使用好处：

1. 使数据独立并进行隔离
2. 可全局控制易维护、好操作。
3. 具有结构化，且可以使用storage存储

Vuex持久化：相当于将状态在本地进行缓存，达到持久化存储的效果

二、使用三方插件createPersistedstate，将数据持久化。

1. 安装
   npm install vuex-persistedstate
2. 引用
   在 store/index.js 引用

import createPersistedstate from 'vuex-persistedstate'

const stores = default new Vuex.Store({
	plugins: [
    createPersistedstate({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.sessionStorage,
      // 存储的 key 的key值
      key: 'erabbit-client-pc-store',
      // 只持久化存储userInfo、main模块的状态
      paths: ['userInfo', 'main']
    })
  ]
})

三、使用sessionStorage或者localStorage存储

1. 封装sessionStorage以及localStorage

// localStorage utils/locals.js
	export default {
	  setItem: function (name, value) {
	    value = JSON.stringify(value) + TMP
	    let enValue = encodeURIComponent(value)
	    localStorage.setItem(name, enValue)
	  },
	  getItem: function (name) {
	    let enValue = localStorage.getItem(name)
	    if (enValue) {
	      let value = decodeURIComponent(enValue).split(TMP).join('')
	      return JSON.parse(value)
	    } else {
	      return false
	    }
	  }
	}

// sessionStorage  utils/sess.js
	export default {
	  setItem: function (name, value) {
	    value = JSON.stringify(value) + TMP
	    let enValue = encodeURIComponent(value)
	    sessionStorage.setItem(name, enValue)
	  },
	  getItem: function (name) {
	    let enValue = sessionStorage.getItem(name)
	    if (enValue) {
	      let value = decodeURIComponent(enValue).split(TMP).join('')
	      return JSON.parse(value)
	    } else {
	      return false
	    }
	  }
	}
	  

2. 下面用sessionStorage存储举例子

import ss from '@/utils/sess'

const store = new Vuex.Store({
  state: {
    count: ss.getItem('count') || 0
  },
  mutations: {
    handleCount (state, params) {
      // 变更状态
      state.count++
      ss.setItem('count', state.count)
    }
  }
  ... ...
})