Vue 3非关联双组件如何创建可共用修改的全局变量控制内容显隐

这个需求完全可以实现，针对Vue3的技术栈和入门级使用场景，有两种常用的实现方案，你可以根据项目规模选择： #

方案1：独立响应式变量（最简方案，适合小型项目/单状态共享场景） #

Vue3的ref/reactive响应式API本身可以脱离组件上下文工作，你只需要单独新建一个公共文件导出响应式变量，两个独立组件直接导入该变量即可共同读写，任意一侧修改都会同步触发两侧的响应式更新。

实现步骤： #

1. 新建公共状态文件 src/shared/commonState.js

import { ref } from 'vue'
// 导出共享的响应式变量，初始值设为false表示默认隐藏
export const showFlag = ref(false)

2. 任意组件内导入使用即可：
   组件A（修改状态的组件）：

<template>
  <button @click="showFlag = !showFlag">切换显示状态</button>
</template>
<script setup>
import { showFlag } from '@/shared/commonState.js'
</script>

组件B（受状态控制的组件）：

<template>
  <div v-if="showFlag">我是被共享变量控制显示的内容</div>
</template>
<script setup>
import { showFlag } from '@/shared/commonState.js'
</script>

方案2：Pinia状态管理（推荐中大型项目使用） #

如果你的项目后续会有越来越多的跨组件共享状态，建议使用Vue官方推荐的Pinia状态管理工具，支持状态调试、持久化、批量修改等扩展能力，结构更易维护。

实现步骤： #

1. 安装Pinia：项目根目录执行命令 npm install pinia
2. 在项目入口文件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')

3. 新建状态仓库文件 src/stores/controlStore.js

import { defineStore } from 'pinia'

export const useControlStore = defineStore('control', {
  state: () => ({
    showFlag: false
  }),
  actions: {
    // 封装修改状态的方法，方便统一管理
    toggleShow() {
      this.showFlag = !this.showFlag
    }
  }
})

4. 组件内使用：
   组件A（修改状态）：

<template>
  <button @click="controlStore.toggleShow()">切换显示状态</button>
</template>
<script setup>
import { useControlStore } from '@/stores/controlStore.js'
const controlStore = useControlStore()
</script>

组件B（受状态控制）：

<template>
  <div v-if="showFlag">我是被共享变量控制显示的内容</div>
</template>
<script setup>
import { useControlStore } from '@/stores/controlStore.js'
import { storeToRefs } from 'pinia'
const controlStore = useControlStore()
// 使用storeToRefs保证解构后的变量保持响应式
const { showFlag } = storeToRefs(controlStore)
</script>

踩坑提示：不要使用Vue2常见的挂载到app.config.globalProperties的方式共享变量，这种方式挂载的变量默认不具备响应式，也不符合Vue3组合式API的设计规范。

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