質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

0回答

246閲覧

mutationハンドラを使いまわしをしたい。

MasatofromMGSV

総合スコア21

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2019/11/21 07:40

編集2019/11/21 17:02

やっていること

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/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問