はじめに
こんにちは！
今回は【Vuex】アクションの利用についてアウトプットしていきます！
アクションとは
アクションはミューテーションと似ていますが、下記の点で異なります。
・アクションは、状態を変更するのではなく、ミューテーションをコミットします。
・アクションは任意の非同期処理を含むことができます。
書き方・解説
pages/index.js
<p>{{ $store.state.message }}</p>
<button v-on:click="$store.dispatch('updateMessageAction')">Dispatch</button>
store/index.js
mutations:{
updateMessage: function(state,payload){
// ⏬state.messageを書き換える処理
state.message = payload
}
},
actions: {
updateMessageAction(context) {
context.commit('updateMessage', 'Commit with payload')
}
}
actionの中からmutatiomsを呼ぶように修正を行います。
定義したupdateMessageActionをコンポーネント側から呼びます。
この時、commitメソッドではなくdispatchメソッドを使います。
また、actionでもmutations同様、値渡しすることが可能です。
最後に
今回はアクションの利用についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。
今後ともQiitaにてアウトプットしていきます！
最後までご愛読ありがとうございました！