Vuex的持久化（部分）

vuex在刷新之后数据就会消失，这时候就需要实现数据持久化，我们可以使用本地存储或者通过插件来实现

1.利用本地存储

vuex的state从localStorange或sessionStorage或者其他存储方式中取值， 在mutations中，定义的方法中对vuex的状态进行对应的操作,对需要进行存储的数据进行存储.

2.利用插件：vuex-persistedstate

(1)安装

npm install vuex-persistedstate --save

(2) 在store中的index.js中进行引入及配置

默认会存储在localStorage中

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
    // ... 
    plugins: [createPersistedState()] 
})

如果要存储在sessionStorage：

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

如果要指定存储：

plugins: [createPersistedState({
     reducer(val){
         // 只存储state中的info
         info:val.info
     }
 })]

文章借鉴：hollyDysania

借鉴文章： Vuex持久化插件-解决刷新数据消失的问题

更多内容详见： juejin.cn/post/684490…