Vue3全局变量值无法在模板中实时更新的问题求助

核心问题：直接替换this.$test整个对象会破坏Vue的响应式绑定——reactive创建的响应式对象，只有修改其内部属性时才会触发视图更新；如果直接用新对象/数组覆盖原变量，会让模板和原来的响应式代理断开关联，导致控制台能看到值变更，但模板始终显示初始值。

1. 快速修复现有代码 #

保留main.js的定义（无需修改） #

import router from './router'
import { createMetaManager } from 'vue-meta'
import i18n from './assets/js/i18n.js'
import App from './App.vue'
import { reactive } from 'vue'

import './assets/js/app.js'
import './assets/styles/app.scss'


const app = createApp(App)
  .use(router)
  .use(i18n)
  .use(createMetaManager())

app.config.globalProperties.$test = reactive({ id: 1, name: 'test' })

app.mount('#app')

修改组件代码（避免直接替换对象） #

不要直接给this.$test赋值新对象，改用Object.assign更新内部属性，清空时重置属性而非替换整个变量：

<template>
    <template v-if='$test.id'>{{ $test }}</template>
    <button class='btn btn-primary' @click='set'>change</button>
    <button class='btn btn-primary' @click='reset'>reset</button>
    <button class='btn btn-primary' @click='update'>update</button>
</template>

<script>
export default {
    methods: {
        set() {
            // 用Object.assign更新内部属性，保留响应式代理
            Object.assign(this.$test, { id: 3, name: 'user3' })
            console.log(this.$test)
        },
        reset() {
            // 重置属性而非替换对象
            this.$test.id = null
            this.$test.name = ''
            console.log(this.$test)
        },
        update() {
            // 此方法原本就正确，直接修改属性即可触发响应
            this.$test.name = 'updated name'
            console.log(this.$test)
        },
    },
    mounted() {
        // 同样用Object.assign更新
        Object.assign(this.$test, { id: 2, name: 'user' })
        console.log(this.$test)
    }
}
</script>

2. 更适合全局状态管理的方案（推荐） #

如果是类似$user这种需要全局共享、支持登录/登出状态切换的场景，更推荐用以下规范方案：

方案一：使用Pinia（Vue官方推荐） #

1. 安装Pinia：

npm install pinia

2. 创建用户状态Store（src/stores/user.js）：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    id: null,
    name: ''
  }),
  actions: {
    // 登录赋值
    login(userInfo) {
      this.id = userInfo.id
      this.name = userInfo.name
    },
    // 登出清空
    logout() {
      this.id = null
      this.name = ''
    }
  }
})

3. 在main.js注册Pinia：

import { createPinia } from 'pinia'
// ...其他导入代码

const app = createApp(App)
  .use(router)
  .use(i18n)
  .use(createMetaManager())
  .use(createPinia()) // 注册Pinia

app.mount('#app')

4. 组件中使用：

<template>
    <a href='/profile' v-if='userStore.id'>Profile</a>
    <a href='/register' v-else>Register</a>
    <button @click='userStore.login({id: 1, name: "test"})'>登录</button>
    <button @click='userStore.logout'>登出</button>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>

方案二：使用provide/inject #

1. 在main.js提供全局状态：

import { reactive, provide } from 'vue'
// ...其他导入代码

const app = createApp(App)
// ...其他use配置

// 创建全局响应式状态
const userState = reactive({ id: null, name: '' })
// 注入全局状态
provide('userState', userState)

app.mount('#app')

2. 组件中使用：

<template>
    <a href='/profile' v-if='userState.id'>Profile</a>
    <a href='/register' v-else>Register</a>
    <button @click='login'>登录</button>
    <button @click='logout'>登出</button>
</template>

<script setup>
import { inject } from 'vue'
const userState = inject('userState')

const login = () => {
  Object.assign(userState, { id: 1, name: 'test' })
}

const logout = () => {
  userState.id = null
  userState.name = ''
}
</script>

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