NuxtでVuexを使う2

Nuxt

前回の記事でStoreのmutationsにvueから直接commitしていましたが、公式のTodoアプリを見るとactionを定義して、そこを経由してcommitしていました。

なので、そのように作り変えます。

export const state  = () => ({
    lists: [
        {name:"牛乳",price:160},
        {name:"りんご",price:200}
    ]
})


export const actions = {
    addList({commit},list){
        commit('ADD_LIST',list)
    }
}

export const mutations = {
    ADD_LIST(state,obj) {
        state.lists.push({
            name:obj._name,
            price:obj._price
        })
    }
}

そしてtest.vueの中身も変更

  methods:{
add:function(){
	this.$store.dispatch(`list/addList`,{_name:"バナナ",_price:100})
	 }
  }

やっていることは変わらないですが、actionsを経由して状態の書き換えを行うようになりました。

actionを発火するにはdispatchを使います。

コメント

タイトルとURLをコピーしました