If the bottom of life, the only thing left is to climb up

preface

1 introduction

The constructor

VuexPersistence

const vuexLocal = new VuexPersistence(options)
Copy the code

Configuration item attribute attrs

storage

/ / / / persistent way localStorage | sessionStorage | localforage window. / / the default localStorage options = {storage: window.sessionStorage }Copy the code

key

Vuex // sessionStorage['vuex'] = Reducer options = {key: 'MY_STORE'}Copy the code

modules

Menu. Menus = {modules: ['menu'] } import menuModule from './menu' new Vuex.Store({ modules: { menu: menuModule } })Copy the code

Configuration item method (methods)

reducer

Options = {modules: {menu: menuModule} Reducer: state => {return {token: Menus: state.token, // Do not use state.menu.menu: state.menu}}}Copy the code

filter

// default returns true, i.e., all state changes will be persisted. Options = {filter: Return mutation === 'setToken'} return mutation === 'setToken'}Copy the code

2 use

The installation

npm install --save vuex-persist
Copy the code

configuration

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],
})
Copy the code

State persistence

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 {// State persistent token: state.token, // module persistent menu: Menu // auth not persistent // auth: false}}}) export default new vuex. Store({state: {// Persistent token is configured: Open mutations: // open mutations: { setToken(state, token) { state.token = token }, setAuth(state, auth) { state.auth = auth } }, actions: {}, plugins: [vuexLocal.plugin], modules: { menu: menuModule } })Copy the code

3. Pay attention to

1. After the modules configuration is introduced, there is no need to use the namespace to set state. 2

The end of the

Why do you have so many questions every day, my little friend, but cute love has no head ~

Good night ^_^

Refer to the link

  • Vuex – persist website

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player
  • Learn a vue plugin every day (17) — js-file-download
  • Learn a VUE plugin (18) every day — JS-Audio-Recorder
  • Learn a VUE plugin (19) every day – VUe-TreesELECT
  • Learn a VUE plug-in (20) — ProgressBar every day
  • Learn a VUE plugin every day (21) – ProvidePlugin
  • Learn a VUE plugin (22) every day — VUe-Router
  • Learn a VUE plugin (22) every day — VUe-Router
  • Learn a vue plugin every day (23) – urL-loader
  • Learn a vue plugin (24) every day – DriveJS