Vue 2组件多实例共享状态的单例模式实现方法问询

你要找的第三种模式，是将共享状态抽离为组件外部的独立对象，再让组件的data函数返回该对象的引用。这样同一组件的所有实例都会共用这份数据，实现状态共享。

具体实现代码 #

首先在组件文件外部定义共享状态对象：

// 外部共享状态，所有组件实例都会引用这个对象
const sharedComponentState = {
  key: 'value'
}

然后在组件的data函数中返回这个对象：

export default {
  data() {
    return sharedComponentState
  },
  // 组件其他逻辑...
}

为什么之前的写法不生效 #

• 非单例写法（data返回新对象）：每次实例化组件时，data()都会返回一个全新的对象，每个实例的状态完全独立，自然无法共享。
• 直接定义data对象：Vue2 中组件的data必须是函数（根实例除外），如果强行写成对象，Vue 会抛出警告。即使某些场景下没报错，在 SPA 路由切换时，组件销毁重建后可能会重新初始化该对象，导致无法跨页面实例共享状态。

这种方案是早期 Vue 教程中常用的轻量共享方式，适合简单场景下的组件内状态共享，无需引入状态管理库。

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