- 03-5820-1777平日10:00〜18:00
- お問い合わせ
Vuexをちゃんと理解してない時にはまった事象ですが、stateの変数に値を設定しても、反映されない時があった場合の対処例
stateの変数に直接値を設定している場合、正常に反映されない時があります。
(countという変数がstateに定義してあった場合の例)
store.state.count = 10
公式ページを見れば分かりますが、正しい使用方法を以下になります。
actionを通して値を更新する
actionを介して値を更新すると非同期処理になります。
state: {
count:0,
},
mutations: {
setCount(state, value){
state.count = value
}
},
actions: {
setCount: function(commit, value) {
commit('setCount', value)
}
}
store.dispatch('setCount', 10)
mutationを直接呼んでも正しく反映される。
非同期に値を更新したくない場合はmutationを直接呼んでも正常に反映されます。
store.commit('setCount', 10)