コラム

[Vue.js]Vuex使用時に値が反映されない時の例

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)
この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせはこちら
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問