每天学习一个vue插件(25)——vuex-persist

吐槽君 分类:javascript

每天学习一个vue插件(25)——vuex-persist

人生若跌倒谷底,剩下的便只有往上爬了

前言

每天学习一个vue插件(25)——vuex-persist

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

回复

我来回复
  • 暂无回复内容