如何在 Vue3 单文件组件实例之间共享数据？答案

【问题标题】：How to have data shared between Vue3 single file component instances?如何在 Vue3 单文件组件实例之间共享数据？
【发布时间】：2021-09-24 15:26:35
【问题描述】：

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

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

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

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

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

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

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

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

有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

这取决于要定义的数据、其复杂性和用途。

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

如果数据应该是响应式的，您可以按照 Vue 文档中的说明设置简单的状态管理：Simple state management。

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

【讨论】：

【解决方案2】：

按照@Igor 的回答，我关注了简单的状态管理，并找到了创建响应式原始值的ref() 方法。

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

const reactive_array = ref([]);

export default {
    data() {
        return {
            shared_array: reactive_array,
        };
    },
};

【讨论】：