vuex持久化插件应用vuex-persistedstate

Posted 2021-08-31 奥特曼　

在我们之前都是手动 把数据存到 localstoreage 和cookie中 通过vuex每次去获取，除了存储到我们也可以通过 一个插件解决 手动去存储   

npm ： https://www.npmjs.com/package/vuex-persistedstate

安装vuex的持久化插件  

npm i vuex-persistedstate

使用vuex-persistedstate插件来进行持久化

store/index.js中，使用插件来做持久化。

import { createStore } from 'vuex'
+ import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'

export default createStore({
  modules: {
    user,
    cart,
    category
  },
+  plugins: [
+    createPersistedstate({
+      key: 'erabbit-client-pc-store',
+      paths: ['user', 'cart']
+    })
+  ]
})

• 默认是存储在localStorage中

• key是存储数据的键名

• paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

• 修改state后触发才可以看到本地存储数据的的变化。

存储到sessionstorage

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

所有模块都做持久化

 plugins: [createPersistedState()],