Vue.js 如何避免在多个JavaScript文件中访问vue实例？

序言-虽然有一篇文章提到了类似的问题，但推荐的解决方案涉及将vue实例附加到窗口，以便在多个javascript文件中访问它，这似乎是一个糟糕的设计

我的应用程序中有以下高度简化的基本结构：

vm=新的Vue({
el:#vue应用程序“，
数据：{
信息：[]，
complexTaskInProgress:false
},
方法：{
按钮点击：函数（）{
complexTaskInProgress=true
//从另一个文件导入的方法
等待complexTask（）
complexTaskInProgress=false
}
}
})

问题是

complexTask

需要不断向

消息列表添加值

例如-
complexTask
可能需要20秒来执行，并每隔2秒向
消息添加一个值。我不能只等待20秒执行
complexTask
，然后返回
消息的新值，我需要与
complexTask
同步更新
消息
（也就是说，只要
complexTask
更新
消息
，更改就应该反映在我的网站上）

但是，执行上述操作需要从
complexTask
中访问
vm
，这是不可能的，除非我将
vm
附加到浏览器的
窗口
对象

让
complexTask
更新
消息列表的正确方法是什么
 这取决于
complexTask
如何更改
消息

如果替换消息->只需返回新消息并更新Vue组件数据：

按钮点击：函数（）{
this.complexTaskInProgress=true
//从另一个文件导入的方法
this.messages=wait complexTask（）
complexTaskInProgress=false
}

如果它修改消息（添加、更新、删除对象），则只在函数中显示当前消息，并返回更新消息的数组：

按钮点击：函数（）{
this.complexTaskInProgress=true
//`complexTask`复制原始消息数组并返回它，其中包含所有需要修改的内容
this.messages=wait complexTask（this.messages）；
complexTaskInProgress=false
}

顺便说一句，这可以通过自定义Vuex插件解决


使用状态管理器（Vuex/Redux/etc）。在这种情况下，整个应用程序只有一个状态树（单一真实来源）。例如，您可以编写自定义Vuex插件来解决此问题。它可以访问当前状态，并可以在需要时运行突变/操作。了解更多有关此的信息


使用共享状态。在这种情况下，您将只传递共享状态，而不是整个组件实例，因此开销要低得多。而且，与使用状态管理器相比，它的实现更简单
 是时候用一些东西来提升你的状态了：
vuex
，
redux
，恐怕我不是很清楚。我需要不断更新
消息
。我用一个例子更新了我的帖子。看起来你需要州经理。自定义vuex插件可以随时访问状态，并在需要时调用操作/变体needed@Roymunson更新。添加了有关状态管理器和共享状态的信息