퀘이사 프레임워크에서 전역 개체를 저장할 위치

퀘이사 프레임워크에서 전역 개체를 저장할 위치

Vue를 기반으로 한 Quasar Framework를 사용하여 이전 앱을 재작성하고 있으며, 웹 소켓 기능을 캡슐화한 코드(클래스)를 가지고 있습니다.

매우 간단한 개념입니다.사용자는 앱에서 페이지 사이를 이동하지만, 메시지를 받으면 건배 메시지/답장 또는 의 카운터를 볼 수 있습니다.unread messages인크리먼트.

나는 조금 혼란스럽다.Quasar(Vue)의 아키텍처에 대한 질문은 다음과 같습니다.

외부와 통신하는 글로벌 오브젝트를 어디에 저장합니까?어디서나 애플리케이션이 존재하고 액세스 할 수 있는 한 말입니다.

의 문서를 읽었습니다.Quasar(Vue어디에 둬야 할지 모르겠어요.Vuex는 앱 상태가 아니기 때문에 올바르게 표시되지 않습니다.얼굴 없는 컴포넌트에 가깝습니다.

플러그 인을 사용해야 한다는 건가요?Vue.prototype아니면 글로벌 믹스인 같은 거?

누군가 자신의 경험과 이 오브젝트의 메서드를 초기화하고 액세스하는 방법을 설명하는 코드를 공유해 주시면 감사하겠습니다.

내 의견으로는:

방법 1Vue 프로토타입을 기반으로 Quasar 플러그인 기반 사용(알고 있었음):

플러그인/foo.display

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

Quasar.conf.syslog

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

요소bar.vue:

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

방법 2js 모듈만 사용

js 모듈은 싱글톤이기 때문입니다.js 모듈을 Import하면 모두 같은 포인터를 가리킵니다.

그러니까 그냥...GlobalTest.js:

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

테스트 1.js:

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

테스트 2.js:

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

---

Quasar cli를 사용했지만 Quasar를 UI lib로 간주합니다.

--- 갱신 ---

매우 간단한 개념입니다.사용자는 앱 내에서 페이지 사이를 이동하지만 메시지를 받으면 건배 메시지/회신 또는 읽지 않은 메시지의 카운터를 볼 수 있습니다.

요건에 따라 'reactive'가 필요한 경우 Vuex(best built-in reactive lib) + 애플리케이션 상태를 모듈로 분할해야 합니다.그러나 Vuex는 'reactive'가 필요한 경우에만 사용하고 값을 읽고 쓸 필요가 있을 때만 사용하지 않도록 합니다.

// ~/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')
})

언급URL : https://stackoverflow.com/questions/52840563/where-to-store-global-object-in-quasar-framework