Vue.js2中Vue.prototype全局user对象跨组件同步更新问题

嘿，这个问题我之前也碰到过！核心原因很简单：你通过Vue.prototype.user = getUser()挂载的是一个普通JS对象，它并没有被Vue的响应式系统追踪。Vue只能对组件data里的对象，或者用Vue.observable()（Vue2）/reactive()（Vue3）创建的响应式对象做依赖收集和更新触发。所以你修改this.user的属性时，Vue根本不知道发生了变化，自然不会通知其他组件更新视图。

下面给你两种靠谱的解决方案，根据项目大小选就行：

方案一：用Vuex（中大型项目首选） #

如果你的项目有不少跨组件共享的状态，Vuex绝对是最优解——它专门管全局状态的同步问题。

步骤1：创建Vuex Store #

新建store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import { getUser } from '@/api/user' // 替换成你的getUser路径

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null // 初始化用户数据为null
  },
  mutations: {
    // 替换整个用户对象
    SET_USER(state, userData) {
      state.user = userData
    },
    // 更新单个字段
    UPDATE_USER_FIELD(state, { field, value }) {
      state.user[field] = value
    }
  },
  actions: {
    // 异步获取用户数据
    async fetchUser({ commit }) {
      const userData = await getUser()
      commit('SET_USER', userData)
    }
  },
  getters: {
    // 方便组件获取用户数据
    currentUser: state => state.user
  }
})

步骤2：在main.js挂载Store #

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store,
  async created() {
    // 初始化时获取用户数据
    await this.$store.dispatch('fetchUser')
  },
  render: h => h(App)
}).$mount('#app')

步骤3：编辑组件（EditProfileComponent.vue） #

用computed配合v-model，修改时触发Vuex的mutation：

<template>
  <form @submit.prevent="saveProfile">
    <input v-model="firstName" placeholder="名" />
    <input v-model="lastName" placeholder="姓" />
    <button type="submit">保存</button>
  </form>
</template>

<script>
export default {
  computed: {
    firstName: {
      get() {
        return this.$store.getters.currentUser.firstName
      },
      set(value) {
        this.$store.commit('UPDATE_USER_FIELD', { field: 'firstName', value })
      }
    },
    lastName: {
      get() {
        return this.$store.getters.currentUser.lastName
      },
      set(value) {
        this.$store.commit('UPDATE_USER_FIELD', { field: 'lastName', value })
      }
    }
  },
  methods: {
    async saveProfile() {
      // 调用你的保存接口，比如：
      // await updateUser(this.$store.getters.currentUser)
      // 如果接口返回更新后的用户数据，可以再commit一次SET_USER确保数据一致
    }
  }
}
</script>

步骤4：展示组件（UserCardComponent.vue） #

直接通过Vuex getter获取数据，自动实时更新：

<template>
  <div class="user-card">
    {{ currentUser.firstName }} {{ currentUser.lastName }}
  </div>
</template>

<script>
export default {
  computed: {
    currentUser() {
      return this.$store.getters.currentUser
    }
  }
}
</script>

方案二：全局响应式对象（小型项目轻量方案） #

如果项目很小，不想引入Vuex，直接搞个全局响应式对象就行。

Vue 2版本 #

在main.js里用Vue.observable()把用户对象变成响应式：

import Vue from 'vue'
import App from './App.vue'
import { getUser } from '@/api/user'

// 创建全局响应式用户容器
Vue.prototype.$userStore = Vue.observable({
  data: null
})

// 初始化用户数据
async function initUser() {
  Vue.prototype.$userStore.data = await getUser()
}

// 等用户数据加载完再挂载App
initUser().then(() => {
  new Vue({
    render: h => h(App)
  }).$mount('#app')
})

组件里直接用：

• EditProfileComponent.vue：

<template>
  <form @submit.prevent="saveProfile">
    <input v-model="$userStore.data.firstName" />
    <input v-model="$userStore.data.lastName" />
    <button type="submit">保存</button>
  </form>
</template>

• UserCardComponent.vue：

<template>
  <div class="user-card">
    {{ $userStore.data.firstName }} {{ $userStore.data.lastName }}
  </div>
</template>

Vue 3版本 #

Vue3用reactive()创建响应式对象，再挂载到全局：

import { createApp, reactive } from 'vue'
import App from './App.vue'
import { getUser } from '@/api/user'

const app = createApp(App)

// 创建响应式用户容器
const userStore = reactive({
  data: null
})

// 初始化用户数据
async function initUser() {
  userStore.data = await getUser()
}

initUser().then(() => {
  // 挂载到全局
  app.config.globalProperties.$userStore = userStore
  // 或者用provide/inject更符合组合式API风格
  app.provide('userStore', userStore)
  app.mount('#app')
})

组合式API组件里用inject获取：

import { inject } from 'vue'

export default {
  setup() {
    const userStore = inject('userStore')
    return { userStore }
  }
}

再啰嗦一句为什么原来的方法不行 #

当你把普通对象挂到Vue.prototype上时，每个组件访问this.user都是直接引用原型上的对象。但Vue的响应式系统不会对原型上的对象做依赖收集——也就是说，你改this.user.firstName的时候，Vue根本没察觉到变化，自然不会让其他组件重新渲染。只有刷新页面重新调用getUser()替换整个对象时，组件才会因为引用变了而更新，但这显然不是实时的。

内容的提问来源于stack exchange，提问作者zzlalani