Help us understand the problem. What is going on with this article?

【Vue.js】Vuexの入り口

More than 1 year has passed since last update.

Vuexの学習を始めるにあたり、一体どういうものなのか大枠が分かれば学習も進みやすくなると思い、Vuexを使った基本的な状態管理の流れを書いていきます。

参考記事・文献
Vue.js入門
Vue CLIとVuexでアプリケーションの状態変化を扱う

Node.jsのインストール方法、vue-cliの始め方はこちらの記事が大変参考になります
MacにNode.jsをインストール
Vue.js を vue-cli を使ってシンプルにはじめてみる

Vuexを始める前に

公式ドキュメントを読んでおきましょう。

Vuexとは何か?

始めのうちは書き方も良く分からないですが、ぼんやりと理解し全体として何が出来るのかをつかむことがすごく重要に感じました。
・Vuex とは何か?
・Vuex 入門
・コアコンセプトの5つ
これだけでも目を通しておけば何を意識すれば良いか分かり、後から少しずつ理解できてきます。

Vue-cliを使いVuexを始める

Vue-cliがインストール時にまとめて追加できるので簡単かと思います。
今回はその方法でいきます。


Vue-cliでプロジェクト作成

下記のコマンドでプロジェクトを作成します。project_nameのところは,
お好きな名前で。今回はvue_sumpleとつけました。

terminal
$ vue create project_name

デフォルト設定か自分で設定するか聞かれます。今回はvuexを取り入れるので、Manually select featuresを選択。

terminal
Vue CLI v3.9.2
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

取り入れられる対象のパッケージが表示されます。BabelとLinter / Formatterは初期でチェックが入っています。Vuexの他にRouterやsassを使うかなども選べます。今回はVuexにチェックを入れます。(スペースキーでチェック出来ます)

terminal
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にしました。)

terminal
? Save this as a preset for future projects? (y/N)

ここで作成が開始されます。
無事作成完了すると、下記の画面が表示されます。
コマンドの指示に従って、作られたディレクトリに移動しnpmを立ち上げます。

terminal
🎉  Successfully created project vue_sumple.
👉  Get started with the following commands:

 $ cd vue_sumple
 $ npm run serve 

下記の画面が表示されるので、LoacalのURLをブラウザにコピペします。

terminal
 App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.25:8080/

下記の画面が表示されれば成功です!!
スクリーンショット 2019-07-07 21.24.31.png

今回修正するファイル

・main.js
・store.js
・App.vue
この3つでvuexの大まかな流れは掴めるかと思います。

main.js

初期でVuex用のスクリプトを読み込むようになっているので、ここは今回いじらなくても良いです。

main.js
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

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

App.vue
<template>
  <div>
    <!-- ここに実装を書く -->
  </div>
</template>

<script>
export default {
  // ここに実装を書く
}
</script>

実装例

例として、todoリストのタスク表示のサンプルコードを載せます。
store.jsのstateにタスク内容、それをApp.vueで表示、という流れがわかるかと思います。

store.js
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
      }
    ],
  },
})
App.vue
<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は大きく漠然としたもののように感じるかもしれませんが、細分化し始めの一歩はどこになるのかを考え紐解いていくことで、少しずつ仕組みが理解できると思います。

また学習が進み次第、更新、掲載していきます。
ここまでで補足や訂正などありましたら是非ご教授いただけると嬉しいです。
最後まで読んでいただきありがとうございます。

kouki-iwahara
フロントエンドエンジニア JS,TS書いてます。 備忘録、アウトプットとして投稿します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away