目的:我们用vuex-持久化的目的是为了让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。
-
在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。
-
再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页需要存储在本地。
1)首先:我们需要安装一个vuex的插件vuex-persistedstate
来支持vuex的状态持久化。
npm i vuex-persistedstate
//或者 yarn add vuex-persistedstate
2)然后:使用vuex-persistedstate插件来进行持久化,在vuex中的index.js中执行下列代码
import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
import cart from './modules/cart'
import cate from './modules/cate'
export default createStore({
modules: {
user,
cart
},
//paths中的数组写的是vuex模块化之后的名字
+ plugins: [
+ createPersistedstate({
+ key: 'erabbit-client-pc-store',
+ paths: ['user', 'cart']
+ })
+ ]
})
在vue2中如何实现
import Vue from 'vue'
import Vuex from 'vuex'
******************先导入*************************
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
**********************在这个对象里加上就完成啦, 是不是easily*****************************
// 持久化
plugins: [createPersistedState()],
// state '全局状态'
state: {
},
// 集中式修改状态,这里修改会被`监听`
mutations: {
},
// 异步
actions: {
},
// 模块化
modules: {
}
})