イベントバスに「グローバル変数」を保存する方法

Question

私はvueJsを学習しています。イベントバスにカウンタを格納する必要があります。 基本的に私はこのアプローチを必要とします。なぜなら私は複数の兄弟コンポーネントでそのカウンタを使用しているからです。イベントバスにアクセスする必要があります。カウンタとワインダを変更します。私はカウンタにアクセスします。この：それはカウンタに初期値を設定するための正しいアプローチである場合、私は知らないが、私はそのようなものを想像して、私が欲しいとカウンタにアクセスして変更

import Vue from 'vue' 
import App from './App.vue' 

export const quoteBus = new Vue(
data:function(){ 
    return { 
    counter:0 
    } 
} 

); 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

、私は知っている必要がありますどのように私はその値を変更し、eventBusのカウンタープロパティを設定して取得することができます、私はWebkitテンプレート - シンプルを使用しています。

Answer 1

私はあなたのシステムをスパゲッティコードに変えようとしている疑いがあります。あなたはすでにグローバル変数へのいとこであるイベントバスを使用しています。そして、グローバル変数を追加する必要があります。

Vueアプリの通常のアーキテクチャは「props down, events up」です。マスターVueを既に持っているので、より規律の高い通常の方法ではなく、実際にイベントバスを使用する必要があるかどうかを検討する必要があります。あなたはVueを学んでいるので、規定通りのやり方に大きく傾くべきです。

カウンタは最上位のVueに存在し、小道具を介してコンポーネントに渡される必要があります。コンポーネントは、トップレベルのVueが動作し、カウンタを適切に変更するイベントを発行する必要があり、Vueはそれらの変更をコンポーネントに戻します。