Vuex - アクションにのみ突然変異を公開する

Question

私は、クライアントとサーバーの通信に関する状態を保存するためにVuexを使いたいと思っています。検索ロジック：

// status is either synching|synched|error 
state: { query:"", result:[], status:"synching" } 

検索アクションを実装します。アクションだけの突然変異によって状態を変更することができます。

function search(context, query) { 
    context.commit("query", query); 
    context.commit("status", "synching"); 

    // some asynch logic here 
    ... 
     context.commit("result", result); 
     context.commit("status", "synched"); 
    ... 
} 

はしかし、今の変異が同様に私のコンポーネントにさらされている、彼らは今、私の状態が矛盾して作ることができます。コンポーネントから突然変異を隠すことは可能ですか？

Answer 1

アクションは状態を直接変更することができます。後で間違った方法で使用できる他のものを作成する必要はありません。アクションを直接使用してください。

var store = new Vuex({ 
    state: { 
    something: '' 
    }, 
    actions: { 
    async updateSomethingAsynchronnousWay ({state}, payload) { 
     var response = await axios.get(payload.src) 
     state.something = response.data.anyKey 
    } 
    } 
}) 

new Vue({ 
    store 
    el: '#app', 
    created() { 
    this.$store.dispatch({ 
     type: 'updateSomethingAsynchronnousWay, 
     src: 'https//your.rest.api/something' 
    }) 
    } 
})