Vue.js/vuex ajax更新組件與阿賈克斯狀態

Question

我使用vue與vuex vue的webpack模板，我基本上與組件狀態不更新的問題。

我有一個商店

const state = { 
    userData: {}, 
} 

在我的應用我有一個方法

methods: { 

    addUserData: function() { 
     const that = this; 
     axios.get('URL').then(function (response) { 

      let obj = response.data; 
      that.$store.commit('addUserData', {obj}); 

     }); 
    }, 

我打電話的時候，它的安裝

mounted() { 

    this.addUserData(); 

}, 

這與突變更新

const mutations = { 
addUserData(state, {obj}) { 
    state.userData = obj; 
},} 

一切都很好，直到這裏，數據進入商店罰款。但後來我有一個組件沒有工作，因爲它不會等待ajax完成加載，也不會以任何方式綁定。我很可能在這裏做不對，但基本上在我的組件我有

data() { 
    return { 
     weekData : { 
      weekDataList: [].... 

methods: { 

    tester: function(a) { 

     // Sorting the userdata using lowdash 
     this.weekData.weekDataList = _.values(this.$store.state.userData); 

    }, 

}, 

我把這種以同樣的方式，因爲我之前做過

mounted() { 

    this.tester(); 

}, 

的問題是，this.weekData.weekDataList總是返回一個空數組，因爲商店中的userData尚未完成。我有幾十種執行各種計算的方法，都基於這一個數組，所以如果一個失敗，他們都會失敗。

也許我的方法是錯誤的，但理想情況下，我希望更新商店後更新數據屬性？我試着用計算屬性來做這件事，並且{{whatever}}正常工作，但不知道如何更新組件數據。

Answer 1

你是在正確的道路上。計算屬性絕對是這裏走的路。 在你當前的情況下，你的組件對任何反應方式的商店一無所知。你只是有一個函數試圖讀取任何給定點的數據，並且正確的數據可能存在或不存在。

因此，首先，如果組件嵌套在父項下，因爲它似乎是this.$store將指向同一商店。然後，您應該嘗試將所需的值用作屬性，因此它是被動的。

computed: { 
    userData: function() { 
    return this.$store.state.userData 
    } 
} 

和，而你就可以了，還扔weekdata到計算性能：

computed: { 
    userData: function() { 
    return this.$store.state.userData 
    }, 
    weekData: function() { 
    return { 
     weekDataList: _.values(this.userData) 
    } 
    } 
} 

通過這樣做，所有的數據將是被動的，而weekData將相應更新。

希望這有助於，而在一般情況下，當你已經在使用的WebPack，我會考慮開始使用ES6語法，因爲它使事情變得更具可讀性和一些地方乾淨了一點:)