vuejs2 - 在类星体框架中存储全局对象的位置

Question

我正在使用 Quasar Framework 重写我的旧应用程序这是基于 Vue ，并且我有一段代码(类)封装了 websocket 功能。

这是一个相当简单的概念:用户在应用程序中从一个页面移动到另一个页面，但如果他收到一条消息，他可以看到一条 toast 消息/回复或 unread messages 的计数器增量。

我有点迷失在 Quasar ( Vue )架构，这是我的问题:

只要应用程序存在并且可以从任何地方访问，我将在哪里存储与外部世界通信的全局对象？

我阅读了 Quasar 的文档( Vue ) 但我仍然不知道把它放在哪里。 Vuex 看起来不正确，因为它不是应用程序的状态。它更像是一个不露面的组件。

这是否意味着我应该使用插件或Vue.prototype或全局混合或其他什么？

如果有人可以分享他们的经验和一段描述如何初始化和访问该对象方法的代码，我将不胜感激。

Answer 1

在我看来:

方法一、使用基于Vue原型(prototype)的quasar插件(你肯定知道):

插件/foo.js

const fooModule = {
  a: 1,
  doTest() { console.log('doTest') }
};
export default ({Vue}) => {
  Vue.prototype.$foo = fooModule;
}

quasar.conf.js

plugins: [
  'i18n',
  'axios',
  'foo',
],

组件 bar.vue :

methods: {
   test () { this.$foo.doTest() }
}

方法二、直接使用js模块

因为 js 模块是单例的。无论你在哪里导入一个 js 模块，它都指向同一个指针。

所以只要有GlobalTest.js :

export default {
  a: 1,
  inc() { this.a = this.a + 1 }
}

和 test1.js:

import GlobalTest from '/path/to/GlobalTest'
console.log(GlobalTest.a); // output 1
console.log(GlobalTest.inc()); // inc

和 test2.js:

import GlobalTest from '/path/to/GlobalTest'
console.log(GlobalTest.a); // Assuming this was called after test1.js: output 2

我使用了 quasar cli，但我只是将 quasar 视为 UI 库。

- - 更新 - -

It is a fairly simple concept: user travels from page to page in the app, but if he receives a message he can see a toast message/reply or a counter of unread messages increments.

取决于要求，如果您需要“响应式(Reactive)”，您应该使用 Vuex(最好的内置响应式(Reactive)库)+ 将应用程序状态拆分为模块，
但我只在需要“ react 性”时使用 Vuex，而在我只需要读取和写入值时避免使用它。