mutationハンドラを使いまわしをしたい。
やっていること
vuetify+vue-cliで講義の欠席回数カウントするTodoリストを作っています。
https://vuejs-http-e3587.firebaseapp.com/
環境
windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"
プログラミング歴 4か月ほど
目標
mutationハンドラを再利用したい
現状と発生している問題点
➀ vue-cliの単一ファイルコンポーネントでメソッドの使いまわしをするには、thisを用いて下記のことをします。
Count.vue
templateJson() {
let setJson = JSON.stringify(todos);
localStorage.setItem("todos", setJson);
},
addMemo() {
this.templateJson();
this.isActive = false;
},
しかし、vuexを用いてストアのミューテーションハンドラを同じようにthisで使いましようとしたところ次のようなエラーを吐きました。
イメージ説明
➁ そのエラーを吐いた時のソースコード
store/index.js
mutations:{
templateJson(state) {
let setJson = JSON.stringify(state.todos);
localStorage.setItem("state.todos", setJson);
},
addMemo() {
this.templateJson();
this.isActive = false;
},
}
➂ ちなみにtemplateJsonハンドラを使いまわさなければエラーを吐きませんでした。
index/index.js
mutations:{
addMemo(state) {
let setJson = JSON.stringify(state.todos);
localStorage.setItem("state.todos", setJson);
this.isActive = false;
},
}
mutation内でエラーを吐かずにメソッドを使いまわすにはどうすればよいでしょうか。アドバイスあればお願いします。
github全コード
➀ vuexを使用していないブランチの全コード(正常に動く)
https://github.com/masal9pse/courageTodo/tree/382e73c26e56d8096a9360a64d92b9f918de8d52/src
➁ vuexを使用したが、同じようにthisを使いまわししようとしたがエラーを吐いたブランチの全コード(正常に動かない)
https://github.com/masal9pse/courageTodo/tree/vuex2
➂ templateJsonハンドラを使わず、mutationハンドラの使いまわしをしなかったときのブランチの全コード(正常に動く)
https://github.com/masal9pse/courageTodo/tree/vuex
参考にしたサイト
https://cleysense.com/blog/call-another-method-in-the-method-with-vuejs/