每天学习一个vue插件(25)——vuex-persist
分类:javascript
人生若跌倒谷底,剩下的便只有往上爬了
前言
1 介绍
构造函数
VuexPersistence
const vuexLocal = new VuexPersistence(options)
配置项属性 attrs
storage
// 持久化方式
// localStorage | sessionStorage | localforage
// 默认window.localStorage
options = {
storage: window.sessionStorage
}
key
// 存储键值
// 默认 vuex
// sessionStorage['vuex'] = reducer
options = {
key: 'MY_STORE'
}
modules
// 需要持久化模块
// reducer中直接使用state.menus
// 无需使用state.menu.menus
options = {
modules: ['menu']
}
import menuModule from './menu'
new Vuex.Store({
modules: {
menu: menuModule
}
})
配置项方法 methods
reducer
// 需要持久化状态
options = {
modules: {
menu: menuModule
}
reducer: state => {
return {
token: state.token,
// 配置module后,直接使用state.menu
// 无需使用state.menu.menus
menu: state.menu
}
}
}
filter
// 过滤需要改变状态的mutation
// 默认返回true, 即所有状态改变都将持久化
options = {
filter: mutation => {
// 只有setToken改变的token状态可以持久化
// ** 再次改变依然可以持久化 ** 【慎用】
return mutation.type === 'setToken'
}
}
2 使用
安装
import VuexPersistence from 'vuex-persist'
配置
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
key: 'Vuex-Persistence',
storage: window.sessionStorage,
reducer: state => {
console.log('VuexPersistence:state', state)
return {
token: state.token
}
}
})
export default new Vuex.Store({
state: {
token: '',
auth: false
},
mutations: {
setToken(state, token) {
state.token = token
},
setAuth(state, auth) {
state.auth = auth
}
},
plugins: [vuexLocal.plugin],
})
状态持久化
import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import menuModule from './menu'
Vue.use(Vuex)
const vuexLocal = new VuexPersistence({
key: 'Vuex-Persistence',
storage: window.sessionStorage,
modules: ['menu'],
reducer: state => {
console.log('VuexPersistence:state', state)
return {
// 状态持久化
token: state.token,
// 模块持久化
menu: state.menu
// auth不做持久化
// auth: false
}
}
})
export default new Vuex.Store({
state: {
// 配置了持久化
token: '',
// 没有配置持久化
auth: false
},
mutations: {
setToken(state, token) {
state.token = token
},
setAuth(state, auth) {
state.auth = auth
}
},
actions: {},
plugins: [vuexLocal.plugin],
modules: {
menu: menuModule
}
})
3.注意
1.引入modules配置后,无需使用命名空间取state
2.filter过滤mutation时,初次可以过滤,再次依然持久化
尾声
你咋每天都这么多问题咧,我的小朋友呀,可可爱爱没有脑袋~
晚安 ^_^
参考链接
- vuex-persist 官网
往期回顾
- 每天学习一个vue插件(1)——better-scroll
- 每天学习一个vue插件(2)——vue-awesome-swiper
- 每天学习一个vue插件(3)——eslint + prettier + stylelint
- 每天学习一个vue插件(4)——v-viewer
- 每天学习一个vue插件(5)——postcss-pxtorem
- 每天学习一个vue插件(6)——momentjs
- 每天学习一个vue插件(7)——hammerjs
- 每天学习一个vue插件(8)——mcanvas
- 每天学习一个vue插件(9)——MathJax
- 每天学习一个vue插件(10)——Vue-APlayer
- 每天学习一个vue插件(11)——vue-drag-resize
- 每天学习一个vue插件(12)——vue-fullpage
- 每天学习一个vue插件(13)——html2canvas
- 每天学习一个vue插件(14)——vue-pull-to
- 每天学习一个vue插件(15)——vue-content-placeholders
- 每天学习一个vue插件(16)——vue-video-player
- 每天学习一个vue插件(17)——js-file-download
- 每天学习一个vue插件(18)——js-audio-recorder
- 每天学习一个vue插件(19)——vue-treeselect
- 每天学习一个vue插件(20)——progressbar
- 每天学习一个vue插件(21)——ProvidePlugin
- 每天学习一个vue插件(22)——vue-router
- 每天学习一个vue插件(22)——vue-router
- 每天学习一个vue插件(23)——url-loader
- 每天学习一个vue插件(24)——drivejs
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu