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

【问题标题】：where to store global object in quasar framework在类星体框架中存储全局对象的位置
【发布时间】：2019-03-21 06:54:39
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

Store(Vuex) 似乎是存储和维护此类变量的最佳场所。

标签： vuejs2 vue-component vuex quasar-framework

【解决方案1】：

在我看来：

方法一、使用基于Vue原型的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() }
}

方法2.使用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 库。

--- 更新---

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

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

【讨论】：

@luat-nguyen-mxn0 我决定使用插件，这样我就可以从任何地方轻松访问它

【解决方案2】：

// ~/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store
export default function (/* { ssrContext } */) {
  /* eslint-disable no-return-assign */
  return store = new Vuex.Store({
    modules: {...},
    strict: process.env.DEV
  })
}

export function ensureClientStoreExists () {
  if (process.env.SERVER) {
    return new Promise(() => { /* won't resolve */ })
  }
  if (process.env.CLIENT) {
    if (store) {
      return Promise.resolve(store)
    }
    return new Promise(resolve => {
      setTimeout(resolve) // Avoid 'Maximum call stack size exceeded'
    }).then(ensureClientStoreExists)
  }
}

// Anywhere
import { ensureClientStoreExists } from '~/store/'

ensureClientStoreExists().then(store => {
  console.log(store.state)
  store.dispatch('XXX/YYY')
})

【讨论】：