クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する

Vuexの続きです。前回はVuexが何を管理しているのか調べました。Vuexのストアでコンポーネントを跨いで参照するデータを一元管理するということでした。今回はストアに実際にデータ(値)を置いて、コンポーネントから表示してみます。それではいきましょう!

【目次】

※参考:【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた - クモのようにコツコツと

※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

Vuexを利用する方法(今回はNuxt.js)

前回書いたようにVuexを利用するにはいくつかの方法がある。

  • vuex.jsファイルをリンク(CDNでもOK)
  • npmでインストール
  • Vue CLIのオプションでインストール
  • Nuxt.jsには最初から同梱

※参考:【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた - クモのようにコツコツと

前々回まで触ってきたNuxt.jsには最初からVuexが同梱されているので、今回はそれを利用する。

※参考:【Vue.js】Nuxt.jsで何ができるのか調べた(SSR、ルーティング、静的ファイル生成など) - クモのようにコツコツと

プロジェクトを起動していない場合はこちらの方法で起動。

※参考:【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る - クモのようにコツコツと

f:id:idr_zz:20191115050906j:plain

ストアフォルダにindex.jsを作る

書籍「Vue.js & Nuxt.js超入門」を参考に進める。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

  • 作者:掌田津耶乃
  • 出版社/メーカー: 秀和システム
  • 発売日: 2019/02/05
  • メディア: 単行本

nuxt.jsのファイル一式の直下にストアフォルダ(store)があらかじめ用意されている。中にはREADME.mdだけが入っている。ここにindex.jsを追加する。

.
└ store
 ├README.md
 └index.js(追加)

index.jsにデータを配置する関数を定義

index.jsの中にスクリプトを書く。まず全体像

JSコード

import Vuex from 'vuex'

const vuexTest = () => {
    return new Vuex.Store({
    //データを保管
    });
}

export default vuexTest
  • importVuexオブジェクトをインポート
  • 関数vuexTestを定義
  • vuexTestの中でVuex.Store()の中にデータを定義
  • Vuex.Store()の中でデータを定義してreturnで返す
  • exportで関数vuexTestをエクスポート

importVuexオブジェクトをインポートすることで関数vuexTestVuex.Store()を使えるようになる。

export関数vuexTestをエクスポートすることでコンポーネントでexport関数が使えるようになる。

ステートにデータを保管する

関数vuexTestのステート(stete)にデータを保管する。

const vuexTest = () => {
    return new Vuex.Store({
        state: function() {
            return {
                message: 'ゔゅえっくすてすと',
            };
        },
    });
}
  • Vuex.Store()の中は連想配列
  • stateキーの値は無名関数で中はreturn
  • returnの中は無名関数でmessageキーの値を「ゔゅえっくすてすと」とする

stateは「ステート」という機能で、ストアの値を保管する場所。ここにmessageキーの値を用意する。

index.vueの中でストアの値を読み込む

/pages/index.vueを開く。この中に値を読み込む。

<!--前略-->
      <logo />
      <h1 class="title">
        nuxt_appへようこそ!
      </h1>
      <h2 class="subtitle">
        私の邪悪なNuxt.jsプロジェクト
      </h2>

      <p>{{$store.state.message}}、はじめました。</p>

      <p><router-link to="/jaaku">邪悪なページを覗く</router-link></p>
<!--後略-->

追加したのはこの部分

<p>{{$store.state.message}}、はじめました。</p>
  • $storeオブジェクトの中のstoreの中のmessageの値を読み込む

$storeでストアの値を読み込むことができる。

変更が反映されたかを確認するには、ターミナルを一旦閉じて$ npm run devで再起動する必要があるようだ。(エラーになったり画面が何度もリロードしたりした)

再起動してhttp://localhost:3000/を開くと…

f:id:idr_zz:20191211064451j:plain

おお、やった!「ゔゅえっくすてすと、はじめました。」と表示された!

先ほどのmessageの値を打ち変えると…

const vuexTest = () => {
    return new Vuex.Store({
        state: function() {
            return {
                message: 'Vuex_Test', //打ち替え
            };
        },
    });
}

反映される!

f:id:idr_zz:20191211064929j:plain

打ち変えた直後はブラウザがチカチカリロードして変な挙動。いったんページを閉じてhttp://localhost:3000/を開いたら治った。。

最後に

Vuexのはじめの一歩、ストアに値を保管して、それをコンポーネントから参照して表示することに成功しました!親子関係を気にせずにキーの名前だけを呼び出すのはやはりシンプルに感じました♪次回も引き続きVuexでできることを試していきたく思います。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com