如何在Vue所有组件中更新全局变量实现页面标题自动切换

你遇到的问题根源是：App.config.globalProperties 上挂载的基本类型变量（比如字符串），在组件中修改时，会在当前组件实例上创建一个同名的本地属性，覆盖全局变量的引用，而非修改全局变量本身，所以其他组件读取的还是初始值。

下面提供几种可行的解决方法，其中第三种最贴合你“根据视图切换页面标题”的核心需求：

方法一：用响应式对象包裹全局变量 #

将全局变量放在Vue的响应式对象中，这样所有组件引用的都是同一个对象，修改对象属性时会自动同步：

// main.js
import { createApp, reactive } from 'vue'
import AppVue from './App.vue'
import router from './router'

const App = createApp(AppVue).use(router)

// 创建响应式全局状态对象
const globalState = reactive({
  pageTitle: "test"
})

App.config.globalProperties.$globalState = globalState

App.mount('#app');

组件中使用：

// View1.vue
<script>
export default {
  created() {
    this.$globalState.pageTitle = "用户账户"
    console.log(this.$globalState.pageTitle); // 输出"用户账户"
  }
}
</script>

// View2.vue
<script>
export default {
  created() {
    console.log(this.$globalState.pageTitle); // 输出"用户账户"
  }
}
</script>

方法二：使用Pinia状态管理（Vue3推荐） #

如果项目需要管理多个全局状态，用Pinia更规范：

1. 创建状态仓库：

// stores/titleStore.js
import { defineStore } from 'pinia'

export const useTitleStore = defineStore('title', {
  state: () => ({
    pageTitle: "test"
  }),
  actions: {
    setTitle(newTitle) {
      this.pageTitle = newTitle
    }
  }
})

2. 注册Pinia到应用：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import AppVue from './App.vue'
import router from './router'

const App = createApp(AppVue).use(router).use(createPinia())

App.mount('#app');

3. 组件中使用：

// View1.vue
<script>
import { useTitleStore } from '@/stores/titleStore'

export default {
  created() {
    const titleStore = useTitleStore()
    titleStore.setTitle("用户账户")
    console.log(titleStore.pageTitle);
  }
}
</script>

// View2.vue
<script>
import { useTitleStore } from '@/stores/titleStore'

export default {
  created() {
    const titleStore = useTitleStore()
    console.log(titleStore.pageTitle);
  }
}
</script>

方法三：利用路由导航守卫直接设置页面标题（最优方案） #

既然你的核心需求是根据加载视图自动切换页面标题，无需额外全局变量，直接通过路由配置和导航守卫实现更简洁：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import View1 from '../views/View1.vue'
import View2 from '../views/View2.vue'

const routes = [
  {
    path: '/view1',
    name: 'View1',
    component: View1,
    meta: { title: "用户账户" } // 为路由配置标题
  },
  {
    path: '/view2',
    name: 'View2',
    component: View2,
    meta: { title: "首页" }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局导航守卫，切换路由时自动设置页面标题
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

export default router

这种方式无需在组件中手动修改状态，路由切换时自动更新页面标题，完全匹配你的需求。

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