イイダリョウのブログ。【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行する2019-12-20【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行するJSVuexの続きです。前回はVuexストアのステートに保管したデータを読み込みました。今回はミューテーション(mutations)に設定した処理を読み込んで実行してみます。クモのようにコツコツと※参考:Vue.jsの習得のためにやったことまとめqiita.com下層ページでもストアの値を表示させる前回はTopページ上でVuexのストアに保管したデータを呼び出して表示したが、データはどこからでも呼び出せるはずなので確かめてみる。Nuxt.js超入門」を参考に進める。単行本まずは下層ページを作る。今回はカウンターアプリを作ってみたいので、Nuxt.jsの「pages」フォルダの中に「counter.vue」という名前のファイルを作る。「counter.vue」は以前作った下層ページ「jaaku.vue」をベースにする。クモのようにコツコツとこのように書き換えた。<p>{{$store.state.message}}、はじめました。</div></template>ページの違いがわかりやすいように見出しを「かうんたぁあぷりぺぇじ」に変えている{{$store.state.message}}の部分は共通。ここでストアのデータを読み込まれて表示する。devNuxtプロジェクトの起動についてはこちらを参照。クモのようにコツコツと下層ページ「counter」にアクセスしてみる。Vuexのデータ「びゅえっくすてすと、はじめました。」もちゃんと読み込まれている!では、このページで他のデータも表示して行こう。ステート(state)にデータを追加する「store」フォルダの「index.js」を改造。ステート(state)にデータを追加してみる。vuexTestmessageを「このアプリを気に入った人の数↓」にうちかえiconを追加。値は「👍」counterを追加。「counter.vue」にステートを配置する。ミューテーション(mutations)に処理を書くこの時点ではまだ「いいね」アイコンを押してもカウンターは動かない。カウンターを動かす処理はミューテーション(muttations)に書く。Vuex「index.js」を下記のように改造する。連想配列の一つ目はcountキーで値は無名関数。処理はカウントアップ連想配列の二つ目はresetキーで値は無名関数。処理は0へのリセット「counter.vue」にミューテーションを配置する。</p>aタグの中に@clickと@click.shiftを設定。@click値は$store.commitで引数がcount@click.shift値は$store.commitで引数がreset@はv-onの省略形。v-onの詳細はこちらを参照。クモのようにコツコツと@clickはクリックの処理。@click.shiftはシフトボタンを押しながらクリックの処理。ミューテーションは$store.commitとcommitで呼び出すようだ。やた!イイねアイコンをクリックするとカウンターの数字が増えた!シフトを押しながらアイコンをクリックすると0に戻った!なお、ミューテーションとよく似た機能で「アクション(actions)」というのもある。非同期処理を設定することができる。Vuex最後にということで、Vuexのミューテーションに設定した処理を実行することができました。データを読むだけでなく処理を実行できるとまた出来ることが広がりそうです。次回はローカルストレージに値を保存するvuex-persistedstateに触れてみようと思います。21:38Tweet関連記事2019-12-11【Vue.js】Vuexのストアに値を保管してコンポーネントに表示するVuexの続きです。前回はVuexが何を管理しているのか調べました...2019-12-03【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べたVue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていき...2019-11-27【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的...Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと...2019-10-28【Vue.js】Nuxt.jsをインストールして簡易ページを作成したVue.jsの続きです。CLIをインストールしてみた。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。