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'