vuex与localStorage实现数据和页面更新

最近在学习vue的过程中，发现修改个人信息时右上角的头像和昵称无法实时更新，需要手动刷新来更新

一.我的错误方法

我按照网上教程，此处开发步骤为修改个人信息后重新执行 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
    }
},

运行后：点击确定，右上角实时更新，不需要手动刷新了

最近在学习vue，踩了许多坑，关于组件通信和这方面的可以看一下官网关于响应式的原理

深入响应式原理 — Vue.js (vuejs.org)