Vue.js：親/アクセスvueメソッドではないデータを渡す方法は？

Question

私は単純なタイマーアプリで作業しています。私は、サーバーから3つのデータ、タイマー、プロジェクト、ユーザーを取得しています。私はタイマーを正しくループしていると思いますが、このようにデータを渡すべきかどうかはわかりません。私は、プロジェクトの名前が変更された場合など、アプリケーションのさまざまな部分でユーザーとプロジェクトに同じデータセットを使用したいと考えています。これまでに質問が埋め込まれたコードがあります。一度にすべてのデータを一度に呼び出したいと思います。

<script> 
Vue.component('sidebar-timer', { 
    props: ['timer','projects','users'], 
    computed: { 

     /***** SHOULD PROJECT AND USER BE SET A DIFFERENT WAY? *****/ 
     project: function() { 
      return this.projects[this.timer.project_id.toString()]; 
     }, 
     user: function() { 
      return this.users[this.timer.user_id.toString()]; 
     } 
    }, 

    template: '<li class="project-item"><div class="timer-proj-name"> @{{ project.name }}</div><div class="timer-name"> @{{ user.name }}</div> <button class="timer-start-btn">Start</button><div class="timer-duration">@{{ timer.duration }}</div><div class="timer-status">@{{ timer.status }}</div><div id="toggle-timer-notes"><div class="timer-task"> @{{ timer.notes }}</div><div>timer id: @{{ timer.id }}<input :value="timer.id"></li></div>', 
}) 

var TimerSidebar = Vue.extend({ 
    methods: { 
     updateData: function() { // GET DATA FROM THE SERVER 
      var self = this; 
      $.get('/timers/getJson', function(response){ 
       var userObj = response.users; 
       var projectObj = response.projects; 
       var timerObj = response.timers; 
       var timerArr = Object.keys(timerObj).map(function (key) {return timerObj[key]; }); 

/***** IS THERE A WAY TO SET projects AND users AT A LEVEL OUTSIDE OF TimerSidebar? *****/ 
       self.$set(self, 'users', userObj); 
       self.$set(self, 'projects', projectObj); 
       self.$set(self, 'timers', timerArr); 
      }) 
     } 
    } 
}) 
var timerSidebar = new TimerSidebar({ 
    el: '#timer-sidebar', 
    data: { 
      timers: [], 
      projects: [], 
      users: [] 
    }, 
}) 
methods: { 

/***** HOW TO ONCLICK CALL updateTimers FROM OUTSIDE THE COMPONENT? *****/ 
     updateTimers: function(){ // ADD TIME RECORD FROM CLICK EVENT 
      var newTimers = this.timers; 
      newTimers.push({id: 166, project_id: 123, user_id: 1}); 
      newTimers.sort(function(timer1, timer2){ 
       if(timer1.id > timer2.id){ 
        return 1; 
       } else if(timer1.id < timer2.id){ 
        return -1; 
       } else { 
        return 0; 
       } 
      }); 
      this.timers = newTimers; 
     } 
    } 

Answer 1

これは、あなたがcentralised state managementのために行くべきである標準ケースです。複数のコンポーネントで使用されるデータがある場合、データフローが親から子への一方向に制限されている場合、管理が可能ですが、子の変更時に親データを更新する必要があるとすぐに他の兄弟がそれを変更したときに兄弟データを更新すると、厄介になります。

Vueはそれ自身にFlux like implementationを提供しますが、一般的なプラクティスはvuexです。これで、すべてのプロジェクト/ユーザをvuex stateに保存し、各コンポーネントは中央の状態からread/updateになることができます。 1つのコンポーネントによって変更された場合、更新されたバージョンはすべてのコンポーネントに対して反応的に利用可能です。 vuex自体でactionsを使用して1か所でデータを開始できます。続き

は、アーキテクチャ図である：

あなたは同様の質問に私の答えhereを見ていると、APIを呼び出し、ストア内のデータを保存する方法の例を見てすることができます。