如何在ve3单文件组件实例之间共享数据?

Question

我不需要在父组件之间传递数据给子组件或相反，我需要php/c静态变量之类的东西。

我希望我的sfc(单文件组件)有一些数据在页面中的所有实例之间共享。

据我所知，这就是为什么在sfc中我们将data定义为函数

export default {
data(){
return {
// props here
};
}
}

而在页面脚本中，我们可以将其定义为对象

const app = new Vue({
data: {
// props here
},
}

这是因为我们可以在页面中有多个sfc实例，将其数据定义为函数，使每个实例在其中执行并获得自己的data，而使用页面脚本，我们可以有一个实例。

我需要将我的一些sfc数据定义为在组件实例之间共享，而其他数据定义为每个实例。

有办法做到这一点吗?

Answer 1

这取决于要定义的数据、它的复杂性和目的。

如果这些是2或3只读变量，它们可以设置为使用Vue.prototype(Vue 2)或app.config.globalProperties(Vue 3)的全局属性。我不确定，因为在您的示例中您使用Vue 2语法。

如果数据应该是响应性的，您可以像Vue文档中解释的那样设置一个简单的状态管理:

如果数据比这更复杂，下一步将是Vuex。

Answer 2

在@Igor的回答之后，我查看了简单的状态管理，并找到了创建反应性原始值的ref()方法。

在我的特定用例中，我需要在所有sfc实例之间共享一个数组，所以在我的sfc中，我有:

const reactive_array = ref([]);
export default {
data() {
return {
shared_array: reactive_array,
};
},
};