Vuejs2 类星体框架中全局对象的存储位置
我正在使用基于的编写我的旧应用程序,我有一段代码(类)封装websocket功能 这是一个相当简单的概念:用户在应用程序中从一个页面移动到另一个页面,但如果他收到一条消息,他可以看到一条toast消息/回复或一个计数器,其中包含Vuejs2 类星体框架中全局对象的存储位置,vuejs2,vue-component,vuex,quasar-framework,Vuejs2,Vue Component,Vuex,Quasar Framework,我正在使用基于的编写我的旧应用程序,我有一段代码(类)封装websocket功能 这是一个相当简单的概念:用户在应用程序中从一个页面移动到另一个页面,但如果他收到一条消息,他可以看到一条toast消息/回复或一个计数器,其中包含未读消息增量 我在Quasar(Vue)体系结构中有点迷失了,下面是我的问题: 只要应用程序存在并且可以从任何地方访问,我将在哪里存储与外部世界通信的全局对象? 我阅读了Quasar(Vue)的文档,但我仍然不知道把它放在哪里。Vuex看起来不太合适,因为它不是应用程序的
未读消息
增量
我在Quasar
(Vue
)体系结构中有点迷失了,下面是我的问题:
只要应用程序存在并且可以从任何地方访问,我将在哪里存储与外部世界通信的全局对象?
我阅读了Quasar
(Vue
)的文档,但我仍然不知道把它放在哪里。Vuex看起来不太合适,因为它不是应用程序的状态。它更像是一个没有脸的组件
这是否意味着我应该使用插件或Vue.prototype
或全局mixin或其他东西
如果有人能分享他们的经验和一段描述如何初始化和访问此对象方法的代码,我将不胜感激。在我看来:
方法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
我使用类星体CLI,但我把类星体看作是一个UI LIB。< /P> ---更新---
这是一个相当简单的概念:用户在应用程序中从一页移动到另一页,但如果他收到一条消息,他可以看到一条toast消息/回复或一个未读消息计数器 根据需求,如果您需要“反应性”,则应使用Vuex(最佳内置反应性库)+将应用程序状态拆分为模块, 但我只在需要“反应式”时使用Vuex,在只需要读写值时避免使用Vuex// ~/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)
}
}
//任何地方
从“~/store/”导入{ensureClientStoreExists}
ensureClientStoreExists()。然后(store=>{
console.log(store.state)
存储调度('XXX/YYY')
})
@luat-nguyen-mxn0我决定使用插件,这样我就可以方便地从任何地方访问它。存储(Vuex)似乎是存储和维护这些变量的最佳场所。