vuex数据持久化

存储在vuex中的数据在刷新时，会被初始化为最初的状态。为解决这一问题，一般有两种解决方法：

1、vuex与本地存储相结合

2、使用插件如：vuex-persistedstate

一、与本地存储结合：

初始化数据时：

let defaultCity = "北京"
//使用了localStorage 记得使用try catch 假如用户关闭本地存储或隐身模式，此时使用localStorage会抛出异常
try{
    if(localStorage.city) {  //如果本地存储中有就赋值给defaultCity
        defaultCity = localStorage.city
    }
} catch (err) {
    console.log(err)
}

export default new Vuex.Store({
    state:{
        city: defaultCity
    },
    mutations,
    actions,
    getters
})

给state中的数据赋值时，mutations中：

export default {
    changeHot(state , city) {
        state.city = city
        try {    //同时给localStorage中的city赋值
            localStorage.city = city;
        } catch (err) {
            console.log(err)
        }
        
    }
}

这样用户刷新时，vuex中的数据依旧可以保持状态

二、使用vuex-persistedstate:

不是只有这一种插件，还有其他具有同样功能的插件

使用：

1、安装插件：

npm i vuex-persistedstate --save

2、在store中的index.js中使用插件

(1)、 vuex3版本和 vue2:

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage   //可以自定义数据存储位置
  })],
});

(2)、 vuex4版本和vue3：

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

与js-cookie结合使用

npm i js-cookie --save

store文件夹中index.js文件中:

import createPersistedState from "vuex-persistedstate"
//js-cookie
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
    state:{
        city: defaultCity
    },
    mutations,
    actions,
    getters,
    plugins: [createPersistedState({
        
        storage: {
            getItem: key => Cookies.get(key),
            setItem: (key , value) => Cookies.set(key , value ,{expiress: 7 , secure: true}),
            removeItem:  key => Cookies.remove(key)
        }
    })]
})

mutations.js中：

export default {
    changeHot(state , city) {
        state.city = city
        
    }
}

对本地存储的数据进行加密：

npm i secure-ls --save

store文件夹下的index.js文件中：

import createPersistedState from "vuex-persistedstate"
import SecureLS from "secure-ls"
let ls = new SecureLS({isCompression: false})

export default new Vuex.Store({
    state:{
        city: defaultCity
    },
    mutations,
    actions,
    getters,
    plugins: [createPersistedState({
        storage: {
            getItem: (key) => ls.get(key),
            setItem: (key, value) => ls.set(key, value),
            removeItem: (key) => ls.remove(key),
          },
    })]
})

参考连接：vuex-persistedstate