最近在学习vue的过程中,发现修改个人信息时右上角的头像和昵称无法实时更新,需要手动刷新来更新
![](https://i-blog.csdnimg.cn/blog_migrate/56190031ac26b91884d264d563f5d0cd.gif)
一.我的错误方法
我按照网上教程,此处开发步骤为修改个人信息后重新执行 localStorage.setItem方法更改存储在浏览器的用户信息
localStorage.setItem("user", JSON.stringify(res))
之后尝试直接调用头部组件中的方法更改user,头部组件中的方法为重新获取localStorage中的信息
data(){
return{
user : localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
}
},
methods:{
getUser(){
this.user=localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
}
}
调用后发现user数据更改,但是页面没有实时更新显示
二.解决方法
使用vuex,在项目中创建一个js文件,引入vuex,并在其中定义user
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
},
mutations: {
setUser(state,res){
state.user = res
}
}
})
export default store
在main.js中添加store
new Vue({
router,
store,
request,
render: h => h(App)
}).$mount('#app')
之后在用户信息界面调用this.$store.commit,更新user
save() {
this.request.post("/user", this.form).then(res => {
if (res.code === '200') {
this.$message.success("保存成功")
// 更新浏览器存储的用户信息
this.getUser().then(res => {
res.token = JSON.parse(localStorage.getItem("user")).token
localStorage.setItem("user", JSON.stringify(res))
this.$store.commit('setUser',res)
})
} else {
this.$message.error("保存失败")
}
})
},
在头部组件中,添加computed监听,注释掉data中的user
computed: {
user(){
return this.$store.state.user
}
},
运行后:点击确定,右上角实时更新,不需要手动刷新了
![](https://i-blog.csdnimg.cn/blog_migrate/6bec050ccbbd81c89779b6ee8826c339.gif)
最近在学习vue,踩了许多坑,关于组件通信和这方面的可以看一下官网关于响应式的原理