[JavaScript知识库]vuex实现数据持久化

Vue项目中使用Vuex作为状态管理，其本质上类似于全局的变量存储，方便在所有Vue组件中共享数据，而且也可以动态改变状态。Vuex是单向数据流，实现了双向数据绑定。

在单页应用中Vue项目集成Vuex足够基本使用，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、AccessToken、主题配置等。

持久化原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。

vuex-persistedstate:

https://github.com/robinvdvleuten/vuex-persistedstate#readmehttps://github.com/robinvdvleuten/vuex-persistedstate#readme

1、安装插件 vuex-persistedstate

npm install vuex-persistedstate --save

2、vuex-persistedstate默认存储到localStorage

import createPersistedState from 'vuex-persisitedstate';

Vue.use(Vuex);
export default new Vuex.store({
    //...
    plugins:[createPersistedState] // 注意
})

3、使用vuex-persistedstate自定义存储方式

? ? ? ? 1、存储到sessionStorage

import createPersistedState from 'vuex-persisitedstate';

Vue.use(Vuex);
export default new Vuex.store({
    //...
    plugins:[
        createPersistedState({
            storage:window.sessionStorage // 注意
        })
    ]
})

? ? ? ? 2、存储到cookie

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({ // 注意
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

4、部分数据持久化

????????1、vuex-persistedstate提供有一个reducer函数，可以自定义存储Key

// 实现持久化部分数据，被持久化的数据为：manage模块的isVisitor、login模块的time

import createPersistedState from 'vuex-persisitedstate';

Vue.use(Vuex);
export default new Vuex.store({
    modules:{
        manage,
        login,
        userInfo,
        //...
    },
    strict:debug,
    plugins:[
        createPersistedState({
            reducer(val){ // 注意: 指定需要持久化的数据
                return {
                    isVisitor:val.manage.isVisitor,
                    time:val.login.time
                }
            }
        })
    ]
})

? ? ? ? 2、使用paths参数【推荐：使用更为简单】

// 实现持久化部分数据，被持久化的数据为：manage模块的isAdmin、login模块的token

import createPersistedState from 'vuex-persisitedstate';

Vue.use(Vuex);
const PERSIST_PATHS = ['manage.isAdmin','login.token']; // 注意
export default new Vuex.store({
    modules:{
        manage,
        login,
        userInfo,
        //...
    },
    strict:debug,
    plugins:[
        createPersistedState({
            paths:PERSIST_PATHS // 注意
        })
    ]
})

类似插件还有vuex-persist：https://github.com/championswimmer/vuex-persisthttps://github.com/championswimmer/vuex-persist

? ? ? ? 其属性配置如下：

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖