где хранить глобальный объект в рамках квазара - PullRequest
Новая
       45

где хранить глобальный объект в рамках квазара

0 голосов
/ 16 октября 2018

Я переписываю свое старое приложение, используя Quasar Framework , основанное на Vue , и у меня есть фрагмент кода (класс), который инкапсулирует функциональность веб-сокетов.

Это довольно простая концепция: пользователь перемещается от страницы к странице в приложении, но если он получает сообщение, он может увидеть сообщение / ответ о тосте или счетчик с шагом unread messages.

Я немного растерялся в архитектуре Quasar (Vue) и вот мой вопрос:

Где бы я мог хранить глобальный объект, который общается с внешним миром, существует до тех пор, покаприложение существует и доступно из любого места?

Я читаю документацию Quasar (Vue), но до сих пор не знаю, где ее разместить.Vuex выглядит неправильно, так как это не состояние приложения.Это больше похоже на безликий компонент.

Значит ли это, что я должен использовать плагин или Vue.prototype или глобальный миксин или что-то еще?

Я ценю, если кто-то может поделиться своим опытом икусок кода, описывающий, как инициализировать и получить доступ к методам этого объекта.

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019 
// ~/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')
})
0 голосов
/ 25 ноября 2018

по моему мнению:

Метод 1. Используйте базу плагинов Quasar на прототипе Vue (уверен, что вы это знали):

plugins / 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

Я использовал квазар cli, но я просто рассматриваю квазар как пользовательский интерфейс.

...