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

七秒记忆的鱼
2,084 阅读2分钟

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

前言

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 使用

安装

npm install --save 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时，初次可以过滤，再次依然持久化

尾声

你咋每天都这么多问题咧，我的小朋友呀，可可爱爱没有脑袋~

晚安 ^_^

参考链接

往期回顾

avatar
文章
阅读
粉丝