【Vue2】Vuexライブラリのstoreオブジェクトで定義した値を取得する方法

はじめに

本記事は、Vuexライブラリのstoreオブジェクトを使用した状態管理の動作確認を正確かつ最速で行う方法を記載しています。

対象者

・Vuexライブラリのstoreオブジェクトを使って動作確認をしたい方、
またはその方法を知りたい方
・Vuexやstoreについて詳しく知りたいという方はこちら
→ https://vuex.vuejs.org/ja/guide/state.html

環境構築

Vueプロジェクトの作成（今回はVue2を選択）

任意の場所（プロジェクトを作成したい階層）で下記コマンドを実行
"vue-store-learning"の部分は自由なネーミングでOK！

vue create vue-store-learning

Vuexをインストール

※「npm install vuex」だと、Vue3に対応したバージョンが
自動的にインストールされることによって、エラーとなるため注意！

npm install vuex@3

ファイル作成・修正

・App.vueを下記のように修正

<template>
  <div id="app">
    <h1>{{ $store.state.message }}</h1>
  </div>
</template>

・storeフォルダを作成後、その階層にindex.jsを作成
→ 階層イメージ：src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello Vuex'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
});

・main.jsを下記のように修正
　※コメントアウト「//」のついている箇所を追記

import Vue from 'vue'
import App from './App.vue'
import store from './store'; // Vuexストアのインポート

Vue.config.productionTip = false

new Vue({
  store, // ストアの登録
  render: (h) => h(App),
}).$mount("#app");

いざ、動作確認へ

npm run serve

起動後の状態（正常）

ブラウザの内容

下記のように「Hello Vuex」と表示されていれば成功です！

最後に

シンプルな内容ですが、今回は以上です。
最後までお読みいただきありがとうございました。