在开发的过程中， vuex数据刷新页面会初始化。像用户信息（名字，头像，token）需要vuex中存储且需要浏览器本地存储来实现持久化存储。

1. 安装

npm install vuex-persistedstate --save
或
npm install vuex-vuex-persist--save

2.引入

在store目录下的index.js

import VuexPersistence from 'vuex-persist'
或
import VuexPersistence from 'vuex-persistedstate '

2.1

在index.js下加下面代码就ok！如果不需要配置的话，到这就可以了

 plugins: [createPersistedState()]

3. 配置

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

3. 状态持久化

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}
})

4. 注意事项

1.引入modules配置后，无需使用命名空间取state
2.filter过滤mutation时，初次可以过滤，再次依然持久化

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！