Vuex状态持久化方法

1、Vuex
    1-1 一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化,解决组件之间同一状态的共享问题.
    1-2 Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到.
    1-3 Vuex劣势:在刷新页面后,vuex会重新更新state,所以存储的数据会丢失.

2、实际问题
    2-1 在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该如何解决？
    2-2 消失的原因:因为store的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值
    2-3 解决思路:将state中的数据放在浏览器sessionStorage和localStorage

3、解决办法一:存储到localStorage/sessionStorage
    3-1 通过监听页面的刷新操作,即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息
    3-2 在App.vue中加入下面代码,以localStorage为例:
 

<div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  created() {
    if (localStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, 
      JSON.parse(localStorage.getItem('store'))))
    }
    // 监听页面刷新
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
}

 3-3 vuex配置文件index.js

import Vue from 'vue'
		import Vuex from 'vuex'
		Vue.use(Vuex)
		export default new Vuex.Store({
			state: {
				loginState: 0,
			},
			getters: {
				getLoginState(state) {
					return state.loginState
				},
			},
			mutations: {
				updateLoginState(state, statu) {
					state.loginState = statu
				},
			},
			actions: {
				update({ commit }, statu) {
					commit('updateLoginState', statu)
				},
	          },
		   })
      

3-4、在登录界面Login.vue

created() {
			localStorage.removeItem('store')
		},
		methods: {
			async onSubmit() {
				let opt = {
					url: 'users/login',
					method: 'post',
					data: {
						username: this.form.username,
						userPassword: this.form.userPassword,
					},
				}
				try {
					let res = await request(opt)
					console.log(res)
					if (res.code !== 200) {
						return this.$message.error(res.msg)
					}
					this.$message.success(res.msg)
					// 修改用户状态loginState = 1
                    this.$store.dispatch('update', 1)
					// 保存state到localStorage
					localStorage.setItem('store', JSON.stringify(this.$store.state))
					this.$router.push('/home')
				} catch (error) {}
			}
		}
      

3-5、退出登录,修改loginState = 0

methods: {
			logout() {
				this.$store.dispatch('update', 0)
				this.$router.push('/')
			},
          }

4、解决办法二:使用vue-persistedstate插件

    4-1 安装资源

        npm i vue-persistedstate -S

4-2 在store/index.js配置

import Vue from 'vue'
		import Vuex from 'vuex'
		import { createVuexPersistedState } from 'vue-persistedstate'
		Vue.use(Vuex)
		export default new Vuex.Store({
			state: {
				loginState: 0,
			},
			getters: {
				getLoginState(state) {
					return state.loginState
				},
			},
			mutations: {
				updateLoginState(state, statu) {
					state.loginState = statu
				},
			},
			actions: {
				update({ commit }, statu) {
					commit('updateLoginState', statu)
				},
			},
			plugins: [
				createVuexPersistedState({
					// 默认值vuex
					key: 'userState',
					// 缓存的介质localStorage、sessionStorage
					storage: window.localStorage,
					// 白名单 要缓存的数据，刷新不会丢失，重新打开也不会丢失
					whiteList: ['loginState'],
					// 黑名单 不缓存的数据，刷新丢失
					blackList: [],
				}),
			],
		})

 4-3、登录操作

		try {
			let res = await request(opt)
			console.log(res)
			if (res.code !== 200) {
				return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.$store.dispatch('update', 1)
      this.$router.push('/home')
		} catch (error) {}

 4-4、退出登录

		methods: {
			logout() {
				this.$store.dispatch('update', 0)
				this.$router.push('/')
			},
		}