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のインストール、ストアの作成を行いました。
次はこれらを使用してコンポーネント間でデータ管理を行いたいと思います。
この記事が気に入ったらサポートをしてみませんか?