は、JavaScriptのオブジェクトを格納しVuexでそれを変異 - 概念

Question

は、私は以下のようなJavaScriptオブジェクトのクラスを考えてみましょう：

class Car { 
    var engineTurnedOn = false; 
    ... 

    public turnEngineOn() { 
    engineTurnedOn = true 
    } 
} 

今、私は上のエンジンをオンにしたいです。突然変異を引き起こすturnEngineOnというアクションを作成する必要があります。これは、メソッド 'turnEngineOn'をトリガーするか、このメソッドをオブジェクトに対して直接呼び出しますか？第2のケースでは、店舗は自動車を操作する代わりに、自動車のアレイを管理する責任しか負いません。

ケース1：

//actions 
turnEngineOn = ({commit}, car) => { 
    dispatch('turnEngineOn', car); 
} 

//mutation 
turnEngineOn = (state, car) => { 
    car.turnEngineOn() 
} 

ケース2： car.turnEngineOn() //外の行動

または多分私はJavaScriptのオブジェクトを必要としませんか？それは、少なくとも突然変異を実行するvuexであってはならないので

よろしく

Answer 1

turnEngineOn方法は、コンポーネントメソッドです。 Vuexアクションは、http要求などの非同期呼び出し用です。非同期呼び出しと突然変異が状態を突然変異させた後、アクションは突然変異をコミットできます。

私はあなたがなぜjavascriptのクラス構文を使用しているかのTypscript thatsを使用していると思いますか？そうでなければ、Typescriptを使うか、クラス構文を使わないことをお勧めします。

変異は、あなたが状態を変更するコンポーネントから直接変異をコミットすることができたり、突然変異をコミットするアクションをディスパッチできるかどうか、あなたのvuex状態を変更する唯一の方法である必要があります。私はコンポーネントでのディスパッチだけを使用していますが、コミットを使用して状態を変更するのではなく、コミュニティから見たように、コンポーネントからコミットする人もいます。だからあなたのコードは次のようにする必要があります：

// Car Component... 

class Car { 
    // var isEngineOn = true, you don't need this in here if you want to use vuex state 
    // You need Vue's computed property to reach an element in the vuex store 
    get isEngineOn() { 
     return this.$store.getters.isEngineOn 
    } 
    . 
    . 
    . 
    public toggleEngine() { 
     this.$store.dispatch('toggleEngine') // You don't need payload in this one 
     // You can commit directly like 'this.$store.commit('toggleEngine') if you don't need an action here 
    } 
} 

は、今あなたが車のエンジンを切り替えることが好きなボタンまたはにメソッドをバインドすることができます。

// You need to define the engine variable in your vuex state... 
const state = { 
... 
    isEngineOn: true, 
... 
} 

// Vuex actions... 
toggleEngine ({ commit, state }) { 
    commit('toggleEngine') 
} 

// Vuex mutations... 
toggleEngine (state) { 
    state.isEngineOn = !state.isEngineOn // makes the variable true if false and vice versa 
} 

// Vuex getters... 
isEngineOn (state) { 
    return state.isEngineOn 
} 

コンポーネントから状態を変更し、テンプレートの状態変数を計算プロパティで使用することができます。

詳細については、ドキュメントをチェックしてください。このグラフは、このロジックを理解した後で理解し始めました。 https://github.com/vuejs/vuex