Vuex state の reference (参照) でデータを変更する処理

こんにちは

Vuex stateに、ある"オブジェクト"を登録して使用 / 編集する方式を検討中です。

そのオブジェクトの値を画面要素にバインドして編集した場合、すぐに値の変更が反映されているような挙動になりました。(リアクティブに動いているように見える)

しかし、明示的にmutationをcommitしているわけではないので、おそらくwatchなどでは、変更を監視できない挙動になっていると考えています(・・・本当のリアクティブじゃないとは思っている)

たとえば、値の変更を監視する必要がないケースなどでは、
Vuex stateのオブジェクト参照を直接変更するような使い方って、ありなんでしょうか?


以下、サンプルです

サンプルjsfiddle
https://jsfiddle.net/masa_kunikata/ske9gycu/

template

  <div id="app">
    <div>{{ $store.state.obj }}</div>
    
    <hr />
    
    a:<input v-model="$store.state.obj.a"/><br/>
    b:<input v-model="$store.state.obj.b"/><br/>
    
    <hr />

    <button @click="$store.dispatch('initObj')">initObj</button>
  </div>

store

const store = new Vuex.Store({
  state: {
    obj: {a: 1, b: 2}
  },
  mutations: {
    setObj(state, payload){
      state.obj = payload
    }
  },
  actions: {
    initObj({commit}){
      commit('setObj', {a: 1, b: 2})
    }
  },
})

nuxt の場合、project 生成直後に似たことをやると、こんなエラーが出ます。
まぁ、store を使う意味を無視した使用方法ですからね、それは。

20200715T140504

以下でその制限を無効にもできます。

そのページでしか使わない値なら、そのページ内の変数にしますね、私なら。

1 Like