Vuexの導入とストア作成

Vuexのインストール

Vuexを利用するためには、CDNリンク(URLを読み込むと利用できる)を読み込ませる方法と、Vuexをインストールする方法があります。
今回はnpmインストールでVuexをインストールして利用していきます。
以下のコードでVuexをインストールすることができます。
※前回の記事の開発環境を使用していきます。コンテナの中に入ってコマンドを実行してください。

npm install vuex@3

コマンドを実行すると以下のようにpackage.jsonにVuexが追加されています。

"vuex": "^3.6.2"

Vuexを利用する準備

Vuexを利用するためにstore.jsにストアを作成します。
以下のようにstore.jsを作成してください。

src
├── App.vue
├── assets
│  
├── components
│  
├── main.js
└── store.js

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

main.jsにstoreを追加します。
先程作成したstore.jsをimportして、storeをVueに登録します。

import Vue from 'vue'
import App from './App.vue'
import store from './store'
 
Vue.config.productionTip = false
 
new Vue({
 store,
 render: h => h(App),
}).$mount('#app')

state, getter, mutations, actionの作成

store.jsにデータ管理のコードを書いていきます。
データ管理するために使うものは、state、 getter、 mutations、 actionです。
※これらに関しては、前々回の記事で説明しています。

store.jsに以下のようにコードを追加します。

const store = new Vuex.Store({
   state: {
       content_message: '',
   },
   getter: {
       content_message(state) {
           return state.content_message;
       }
   },
   mutations: {
       setContentMessage(state, payload) {
           state.content_message = payload;
       }
   },
   actions: {
       updateContentMessage({ commit }, message) {
           commit('setContentMessage', { message });
       }
   }
});
export default store

stateでデータの状態を保存、getterでstateの状態を取得、mutationsでstateのデータを変更、actionでmutationsを呼び出したり、その他の処理を行います。

これらを行うことで、コンポーネント間でstateの状態を共有することができるようになります。

ひとこと

Vuexのインストール、ストアの作成を行いました。
次はこれらを使用してコンポーネント間でデータ管理を行いたいと思います。