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

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

【目次】

Vuexを利用する方法（今回はNuxt.js）
ストアフォルダにindex.jsを作る
index.jsにデータを配置する関数を定義
ステートにデータを保管する
index.vueの中でストアの値を読み込む
最後に

※参考：【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超入門

作者:掌田津耶乃
発売日: 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

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

importでVuexオブジェクトをインポートすることで関数vuexTestでVuex.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', //打ち替え
            };
        },
    });
}