Vue 中全局单例的使用？

Question

我想将我的行为集中在定义如下的模型中：

class Foobar {

    doit() {

        console.log('I am doing it');

    }

}

let foobar = new Foobar()

const app = new Vue({

   store, 

   router, 

   foobar,

   ...

})

稍后，在一个子组件中，我想在我的模型上触发一个动作，我想这样做：

<template>

   <b-button @click="doit">Do It</b-button>

</template>

<script>

export default {

    methods: {

        doit() {

           this.$foobar.doit(); // <----

        }

    }

}

</script>

那里似乎$foobar无法访问。

Vue 中将操作集中在外部单例中的正确方法是什么？

Answer 1

您可以这样做，但我不确定数据的持久性如何。Vue.prototype.$foobar = foobar;使用 Vuex 可能会更好，因此它通过应用程序持久化。店内：const state = {&nbsp;foobar: Foobar}const mutations = {&nbsp;initialize (state) {&nbsp; &nbsp;state.foobar = new Foobar();&nbsp; }}在 main/app.js 里面：store.commit('initialize')