Vue.jsサードパーティスクリプトで使用するコンポーネントデータプロパティを公開する方法は？

Question

グローバルな名前空間を汚染することなく、単一ファイルのVueコンポーネントでデータプロパティを公開する最もクリーンな方法は何ですか？私のメインのエントリ・ファイル（app.js）で

はVueのために、私はとても気に入りを設定しています：

import components from './components/components'; 

window.app = new Vue({ 
    el: '#vue', 

    store, 

    // etc. 
}); 

マイcomponents.js輸入私はHTMLスニペットとして使用するすべてのコンポーネントを。これらのコンポーネントの一部は、インポートコンポーネントであり、自分自身ではrootインスタンスのコンポーネントとして直接設定されていません。

特定の単一ファイルのVueコンポーネントの一部のデータプロパティを公開するにはどうすればよいでしょうか？

// Expose this on `Search.vue`: 

data: { 
    // Filled with data from ajax request. 
    results: [] 
} 

マイVueのインスタンスをグローバルに提供されています：

は、例えば私は、Googleアナリティクスに結果の配列から私の最初の3つのオブジェクトを送りたいSearch.vueコンポーネントを持っています。おそらく、特定のコンポーネントに名前や何かでアクセスする簡単な方法はありますか？改善する方法について

this.$store.getters.propertyINeed 

任意の提案：

編集

は、これまでのところ最良のオプションは、現在、そのようなゲッターを通じて（私は私の店の内部で利用できる持っている）私のプロパティにアクセスするようになります。これは大歓迎です。

Answer 1

必要なデータをVuexストアに保存することをお勧めします。ご覧のように、srch-componentには結果を示す計算されたプロパティがあり、データをストアに自動的にディスパッチするウォッチャーがあります。次に、app.$storeのようなものを使用して、コンポーネントを改ざんすることなくデータにアクセスできます。

モジュール（link）を使用してストアを管理することもできます。

Vue.use(Vuex) 
 

 
const store = new Vuex.Store({ 
 
    state: { 
 
    topSrchResult: [] 
 
    }, 
 
    mutations: { 
 
    updateTopSrchResult: (state, payload) => { 
 
     state.topSrchResult = payload 
 
    } 
 
    }, 
 
    actions: { 
 
    UPDATE_TOP_SRCH_RESULT: ({ commit }, data) => { 
 
     commit('updateTopSrchResult', data) 
 
    } 
 
    } 
 
}) 
 

 

 

 
Vue.component('srch-component', { 
 
    template: ` 
 
     <div> 
 
     <div>Input: <input v-model="inputVal" type="text"/></div> 
 
     <div>Search Results:</div> 
 
     <ul> 
 
      <li v-for="item in srchResult">{{item}}</li> 
 
     </ul> 
 
     </div> 
 
    `, 
 
    data() { 
 
     return { 
 
      inputVal: '', 
 
      dummyData: [ 
 
      'Scrubs', 'Hannah Montana', '30 Rock', 'Wizards of Waverly Place', 
 
      'How I Met Your Mother', 'Community', 'South Park', 'Parks and Recreation', 
 
      'The Office', 'Brooklyn Nine-Nine', 'Simpsons', 'Fringe', 'Chuck' 
 
      ]    
 
     } 
 
    }, 
 
    watch: { 
 
     srchResult() { 
 
      const payload = this.srchResult.length <= 3 ? this.srchResult : this.srchResult.slice(0,3) 
 
      this.$store.dispatch('UPDATE_TOP_SRCH_RESULT', payload) 
 
     } 
 
    }, 
 
    computed: { 
 
     srchResult() { 
 
     return this.dummyData 
 
      .filter(
 
      (item) => item.toLowerCase().includes(this.inputVal.toLowerCase()) 
 
     ) 
 
     } 
 
    } 
 
}) 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
    computed: { 
 
     topSrchResult() { 
 
     return this.$store.state.topSrchResult 
 
     } 
 
    }, 
 
    store 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.1/vuex.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 
<div id="app"> 
 
    <div>Top Results</div> 
 
    <ul> 
 
    <li v-for="item in topSrchResult">{{item}}</li> 
 
    </ul> 
 
    <srch-component></srch-component> 
 
</div>