Vue3单文件组件多实例之间如何实现部分数据跨实例共享？

实现方法 #

你要的效果可以直接利用ES模块的单例特性实现，不需要额外引入第三方状态管理工具，具体做法非常简单：

1. 把需要共享的静态变量直接定义在SFC的<script>顶层（不要放在data函数内部），由于同一个SFC模块只会被加载一次，顶层变量天然就是所有组件实例共享的，和PHP/C的静态变量效果完全一致
2. 把需要实例私有的变量放在data函数的返回值中即可

Vue2/选项式API示例 #

<script>
// 模块顶层定义的变量，所有该组件的实例共享
const sharedState = {
  // 要是需要响应式更新视图，直接修改这个对象的属性即可，Vue会自动追踪引用
  showCount: 0,
  globalTip: "所有实例都能看到的公共提示"
}

export default {
  data() {
    return {
      // 实例私有变量，每个实例独立不互相影响
      privateInput: "",
      // 如果需要在模板中访问共享变量，把共享对象挂到实例属性上即可
      shared: sharedState
    }
  },
  methods: {
    increment() {
      // 任意实例修改该值，所有组件实例的shared.showCount都会同步更新
      this.shared.showCount++
    }
  }
}
</script>

<template>
  <div>
    <p>共享计数：{{ shared.showCount }}</p>
    <p>私有输入：<input v-model="privateInput" /></p>
    <button @click="increment">点击增加共享计数</button>
  </div>
</template>

Vue3组合式API示例 #

<script setup>
import { ref } from 'vue'
// 模块顶层定义的响应式共享变量，所有实例共享
const sharedCount = ref(0)

// 定义在setup内部的响应式变量，每个实例独立
const privateValue = ref('')
</script>

<template>
  <div>
    <p>共享计数：{{ sharedCount }}</p>
    <p>私有值：<input v-model="privateValue" /></p>
    <button @click="sharedCount++">点击增加共享计数</button>
  </div>
</template>

注意事项 #

• 不要对共享对象做解构赋值后放到data里，否则会生成私有拷贝失去共享效果
• 如果共享数据不需要触发视图更新，不用套ref/reactive，直接定义普通JS变量即可
• 该方式的共享范围是所有引用了该SFC的实例，不会污染其他组件的全局状态

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