データ変数はVuex

Question

フィドルとVue.jsで計算されたプロパティにウォッチャから更新されていません。私はこの計算されたプロパティが変化しているときに、Vueコンポーネントのデータ変数を設定しようとしていますが、これは起こっていません。ここで

は、Vueのコンポーネントである：ここで

new Vue({ 
    el: '#app', 
    store, 
    data : { 
     myVar : "" 

    }, 
    beforeMount() { 
     this.$store.dispatch('FETCH_PETS', { 
     }).then(() => { 
        console.log("fetched pets") 
     }) 

    }, 
    computed:{ 
     pets(){ 
     return this.$store.state.pets 
     } 
    }, 
    watch:{ 
    pets: (pets) => { 
     console.log("Inside watcher") 
     this.myVar = "Hey" 
    } 
    } 
}); 

はVuexストアです：

const state = { 
    pets: [] 
}; 

const mutations = { 
    SET_PETS (state, response) { 
     console.log("SET_PETS") 
    state.pets = response; 
    } 
}; 

const actions = { 
FETCH_PETS: (state) => { 
     setTimeout(function() { 
      state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi']) 
    }, 1000) 
} 
} 

const store = new Vuex.Store({ 
    state, 
    mutations, 
    actions 
}); 

Hereは、このために作成フィドルです。ご覧のとおり、myVarは更新されていませんが、ペットが読み込まれるとwatcherが呼び出されます。

Answer 1

あなたはES6の矢印機能do not bind the this keyword（矢印機能は、通常のfunctionの上に単純にシンタックスシュガーではない）という事実を逃しました。したがって、あなたの例では、petsウォッチャー内のthisは、デフォルトでwindowになり、VueインスタンスのmyVarは決して設定されません。

Answer 2

これは、これが内部関数で期待するものではないためです。

これを試してみてください：

watch:{ 
    var that = this; 
    pets: (pets) => { 
     console.log("Inside watcher") 
     that.myVar = "Hey" 
    }