随笔集：uniapp和vue刷新后防止vuex数据清空

uniapp和vue刷新后防止vuex数据清空

了解过vuex的都知道 vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它是用来存放一些页面公用的变量以便可以用来解决一些无关系页面传值困难的情况，但他有一个很大的缺点。当你刷新页面后你会发现里面的值打印不到了。因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

解决方案就是通过localStorage、sessionStorage、cookie这些方法在刷新之前将值存入进去，等重新进入页面的时候将存入的数据重新赋给store。

cookie容量太小不考虑，localStorage是不删除不消失，sessionStorage是页面关闭后消失。两者都可以。我选择localStorage，下面是具体代码（App.vue）：

vue

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

uniapp

由于uniapp没有window对象所以不能捕捉到页面刷新的事件，所以我们可以在将一些重要信息赋值给store的时候可以通过uni.setStorage将数据存进去，在小程序刷新后会触发App.vue的onLaunch方法，所以我们可以在这里再将值取出再存入store

下面是具体代码：

		//login.vue
		methods:{
			...mapActions(['getLogin']),
			
			login(){
				...
				this.getLogin(res.object)
			}
			
		}


		//store -> modules -> user.js
		actions: {
			getLogin({commit},data){
				uni.setStorage({
				    key: 'userInfo',
				    data: data
				});
			}
		}


		//App.vue
		onLaunch: function(e) {
			let token = uni.getStorageSync('userInfo').token 
			if (token) {		// 判断有没有token，有则说明登录过了，重新把缓存存进vuex
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						this.login(res.data)
					}
				})
			}else{			//没有就跳到登录页且清掉缓存
				uni.navigateTo({
					url:`/pages/login/index`,
					success() {
						uni.clearStorageSync()
					}
				})
			}
		},
		methods: {
			...mapMutations(['login']),
		}

使用
...mapMutations(['login'])
需要在该页面引入
import { mapMutations} from 'vuex'