Vue.js：如何傳遞不是父級/訪問vue方法的數據？

我正在研究一個簡單的計時器應用程序。我從服務器獲取3段數據：定時器，項目和用戶。我相信我正確地循環定時器，但我不確定是否應該以這種方式傳遞數據。我希望我的應用程序的不同部分爲用戶和項目使用相同的數據集，以防項目名稱更改。以下是嵌入問題的代碼。我想立刻爲所有數據做一個單獨的調用。Vue.js：如何傳遞不是父級/訪問vue方法的數據？

<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; 
     } 
    }

來源

2016-12-02 sam

這時候你應該去一個centralised state management標準的情況。由於您有要由多個組件使用的數據，因此如果數據流僅限於一種方式：父母對孩子，它可以是可管理的，但只要您在更改孩子更改時更新父數據的要求它或者更糟糕的是，當另一個兄弟姐妹改變它時更新兄弟數據，它變得混亂。

Vue自己提供Flux like implementation，但一般的做法是使用vuex。有了這個，你可以將所有的項目/用戶等存儲在vuex state中，並且每個組件都可以從中央國家read/update。如果它由一個組件更改，則更新版本可以被所有組件反應使用。您可以使用vuex本身的actions在一個地方啓動數據。

以下是結構圖：

你可以看看我對類似的問題的答案here，並看看例如在如何調用API，並在商店保存數據。

來源

2016-12-03 02:36:42 Saurabh

Vue.js：如何傳遞不是父級/訪問vue方法的數據？

回答

相關問題