Vuexの学習を始めるにあたり、一体どういうものなのか大枠が分かれば学習も進みやすくなると思い、Vuexを使った基本的な状態管理の流れを書いていきます。
参考記事・文献
Vue.js入門
Vue CLIとVuexでアプリケーションの状態変化を扱う
Node.jsのインストール方法、vue-cliの始め方はこちらの記事が大変参考になります
MacにNode.jsをインストール
Vue.js を vue-cli を使ってシンプルにはじめてみる
##Vuexを始める前に
公式ドキュメントを読んでおきましょう。
始めのうちは書き方も良く分からないですが、ぼんやりと理解し全体として何が出来るのかをつかむことがすごく重要に感じました。
・Vuex とは何か？
・Vuex 入門
・コアコンセプトの５つ
これだけでも目を通しておけば何を意識すれば良いか分かり、後から少しずつ理解できてきます。
##Vue-cliを使いVuexを始める
Vue-cliがインストール時にまとめて追加できるので簡単かと思います。
今回はその方法でいきます。
###Vue-cliでプロジェクト作成
下記のコマンドでプロジェクトを作成します。project_nameのところは,
お好きな名前で。今回はvue_sumpleとつけました。
$ vue create project_name
デフォルト設定か自分で設定するか聞かれます。今回はvuexを取り入れるので、Manually select features を選択。
Vue CLI v3.9.2
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
取り入れられる対象のパッケージが表示されます。BabelとLinter / Formatterは初期でチェックが入っています。Vuexの他にRouterやsassを使うかなども選べます。今回はVuexにチェックを入れます。（スペースキーでチェック出来ます）
Vue CLI v3.9.2
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
❯◉ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
この後何個か質問されますが、こだわりがなければ全てEnterで良さそうです。
最後に設定を保存するか聞かれます。（ここではNにしました。）
? Save this as a preset for future projects? (y/N)
ここで作成が開始されます。
無事作成完了すると、下記の画面が表示されます。
コマンドの指示に従って、作られたディレクトリに移動しnpmを立ち上げます。
🎉 Successfully created project vue_sumple.
👉 Get started with the following commands:
$ cd vue_sumple
$ npm run serve
下記の画面が表示されるので、LoacalのURLをブラウザにコピペします。
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.3.25:8080/
下記の画面が表示されれば成功です！！
#今回修正するファイル
・main.js
・store.js
・App.vue
この３つでvuexの大まかな流れは掴めるかと思います。
###main.js
初期でVuex用のスクリプトを読み込むようになっているので、ここは今回いじらなくても良いです。
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store, //コンポーネントからstoreを利用できるようにする
render: h => h(App)
}).$mount('#app')
###store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //vuexが読み込まれている
// storeをエクスポート
export default new Vuex.Store({ //ここに実装を書く
state: {
},
mutations: {
},
actions: {
}
})
store.jsでは「state」「mutations」「actions」というものがあり、ここで状態管理をまとめて行っています。
【state】
Vueインスタンスでいう「data」オプションのようなもので、初期値としての文字列や配列・ブーリアン値などの値が入ります。
【mutations】
stateの値を更新します。stateの値を更新できるのはmutationsからのみとなります。commit関数で呼び出されます。
【actions】
登録されたmutationsを実行します。commit関数の引数で実行するmutationsを指定します。コンポーネントからはdispatch関数で実行できます。
このようにvuexでは、「actions」で「mutations」の関数を指定し「state」の値を更新、最後にコンポーネントのDOMが書き換わるというイメージになります。
store.jsの内容を表示する為にApp.vueを書き換えていくことになります。
###App.vue
<template>
<div>
<!-- ここに実装を書く -->
</div>
</template>
<script>
export default {
// ここに実装を書く
}
</script>
##実装例
例として、todoリストのタスク表示のサンプルコードを載せます。
store.jsのstateにタスク内容、それをApp.vueで表示、という流れがわかるかと思います。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
tasks: [
{
id: 1,
name: '牛乳を買う',
done: false
},
{
id: 2,
name: 'vueの本を買う',
done: true
}
],
},
})
<template>
<div>
<h2>タスク一覧</h2>
<ul>
<li v-for="task in tasks" v-bind:key="task.id">
<input type="checkbox" v-bind:checked="task.done">
{{ task.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
tasks () {
return this.$store.state.tasks //storeを読む
},
},
}
</script>
長くなってしまうのでここでは画面にstate内容を表示するだけですが、例えば新しくタスク追加する機能を実装する処理をmutationsに宣言しておき、それをApp.vueで動かす処理を書く、といった流れになっていきます。
今回は以上になります。
始めはvuexは大きく漠然としたもののように感じるかもしれませんが、細分化し始めの一歩はどこになるのかを考え紐解いていくことで、少しずつ仕組みが理解できると思います。
また学習が進み次第、更新、掲載していきます。
ここまでで補足や訂正などありましたら是非ご教授いただけると嬉しいです。
最後まで読んでいただきありがとうございます。