やっていること
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/
あなたの回答
tips
プレビュー