Vuex和vuex-persist使用持久化储存

由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失。

页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

vuex的优劣势：

• 优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到

• 劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

• 为了克服这个问题，vuex-persistedstate和 vuex-persist出现了~~

  
  

原理：

• 将vuex的state存在localStorage或sessionStorage或cookie中一份

• 刷新页面的一瞬间，vuex数据消失，vuex回去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~

区别与建议： 个人还是推荐使用vuex-persistedstate，因为使用vuex-persist在一些浏览器，ie和微信会出现语法报错的问题

• vuex-persist是TypeScript类型，vuex-persistedstate是JavaScript类型，默认vue的webpack是没有对TypeScript进行编译的

• 如果想要使用vuex-persist需要手动配置一下webpack，使用 webpack 编译 TypeScript 代码

第一种：vuex-persistedstate

安装vuex-persistedstate

npm install vuex-persistedstate  --save

引入及配置

在store下的index.js中

import Vue from 'vue';
import Vuex from 'vuex';
import info from './modules/user-info';
import knowledge from './modules/knowledge';
import sixElements from './modules/six-elements';
import difficultySpeed from './modules/difficulty-speed';
 
import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
    modules: {
        info,
        knowledge,
        sixElements,
        difficultySpeed
    },
    plugins: [
        createPersistedState({
            storage: window.sessionStorage,
            paths: ["info", "knowledge", "sixElements", "difficultySpeed"]
        })
    ],
});
 
export default store;

第二种：vuex-persist

安装vuex-persist

npm install vuex-persist --save

引入及配置

在store下的index.js中

import Vue from 'vue';
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import conversion from './modules/conversion'
import userInfo from './modules/userInfo'
import tagviews from './modules/tagviews'
 
Vue.use(Vuex);
 
const vuexLocal = new VuexPersistence({
    key: 'message',
    storage: window.localStorage,
    reducer: (state) => ({userInfo: state.userInfo})
})
const vuexSession = new VuexPersistence({
    key: 'message',
    storage: window.sessionStorage,
    reducer: (state) => ({tagviews: state.tagviews})
  })
const store = new Vuex.Store({
    modules: {
        conversion,
        userInfo,
        tagviews
    },
    plugins: [vuexSession.plugin, vuexLocal.plugin]
})
  
export default store