Vue.js/vuex ajax ajax状態のコンポーネントを更新する

Question

私は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がロードを終了するのを待っているわけではなく、何らかの形で束縛されていないので、私は機能しないコンポーネントを持っています。

mounted() { 

    this.tester(); 

}, 

問題があることである前に私がやったと私は同じようにこれを呼んで、私はここにも、この間違ったをやってもよいが、基本的には私のコンポーネントで、私は

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

methods: { 

    tester: function(a) { 

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

    }, 

}, 

を持ってthis.weekData.weekDataListストア内のuserDataが完了できなかったため、常に空の配列を返します。私はこの1つの配列に基づいていろいろな計算を実行する数十のメソッドを持っています。もし失敗すればそれらはすべて失敗します。

おそらく私のアプローチは間違っていますが、理想的には、ストアが更新されるとデータ属性を更新したいのですか？私は計算されたプロパティでこれをやろうとしていて、{{何でも}}うまく働いていますが、コンポーネントデータの更新方法がわかりませんでした。

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構文を使用し始めて検討すると、いくつかの部分少しクリーナー:)うん@codebryo