Vue3组件中如何修改全局变量的状态？

首先，你遇到的问题核心在于：app.config.globalProperties 并不适合用来管理需要跨组件共享且响应式的状态，它更适合挂载全局工具函数或常量。另外你提到的 this.$isAuthnticated 是拼写错误（少了一个e，应该是 this.$isAuthenticated），但即使修正拼写，这种方式也不是全局状态管理的最优解。

推荐方案：使用Pinia（Vue3官方推荐的状态管理库） #

Pinia是专门为Vue3设计的轻量状态管理工具，完美适配响应式需求，步骤如下：

1. 安装Pinia

npm install pinia

2. 创建认证状态Store
   在项目中新建 src/stores/auth.js：

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isAuthenticated: false // 初始认证状态为未登录
  }),
  actions: {
    // 修改认证状态的方法，可接收服务器返回的结果
    setAuthenticated(status) {
      this.isAuthenticated = status
    }
  }
})

3. 在main.js中注册Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

4. 在组件中使用和修改状态

• 选项式API写法：

import { mapState, mapActions } from 'pinia'
import { useAuthStore } from '@/stores/auth'

export default {
  computed: {
    ...mapState(useAuthStore, ['isAuthenticated'])
  },
  methods: {
    ...mapActions(useAuthStore, ['setAuthenticated']),
    async checkAuth() {
      // 模拟axios请求服务器
      const res = await axios.get('/api/check-auth')
      // 根据返回结果修改状态
      this.setAuthenticated(res.data.isAuthenticated)
    }
  }
}

• 组合式API（setup）写法：

import { useAuthStore } from '@/stores/auth'
import axios from 'axios'

export default {
  setup() {
    const authStore = useAuthStore()

    const checkAuth = async () => {
      const res = await axios.get('/api/check-auth')
      authStore.setAuthenticated(res.data.isAuthenticated)
    }

    return {
      isAuthenticated: authStore.isAuthenticated,
      checkAuth
    }
  }
}

备选方案：Provide/Inject + Ref（适合简单场景） #

如果不想引入状态管理库，也可以用Vue3的Provide/Inject配合Ref实现：

1. 在main.js中提供全局响应式状态

import { createApp, ref } from 'vue'
import App from './App.vue'

const app = createApp(App)
const isAuthenticated = ref(false)
app.provide('isAuthenticated', isAuthenticated)
// 同时提供修改方法
app.provide('setAuthenticated', (status) => {
  isAuthenticated.value = status
})
app.mount('#app')

2. 在组件中注入并使用

import { inject } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const isAuthenticated = inject('isAuthenticated')
    const setAuthenticated = inject('setAuthenticated')

    const checkAuth = async () => {
      const res = await axios.get('/api/check-auth')
      setAuthenticated(res.data.isAuthenticated)
    }

    return {
      isAuthenticated,
      checkAuth
    }
  }
}

为什么原来的方法无效？ #

• 如果你在app.config.globalProperties里挂载的是ref对象，在选项式API的组件中需要通过this.$isAuthenticated.value来修改，但这种方式不直观，且状态变更无法在所有组件中可靠同步。
• 拼写错误（$isAuthnticated）会导致无法访问到全局属性，这也是你尝试失败的原因之一。

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