Vuexの導入

アプリケーションの複雑な状態管理を実現してくれるVuexを導入します。

npm install vuex --save

store.jsを作成します。

import Vue from 'vue/dist/vue.esm'
import Vuex from 'vuex'

Vue.use(Vuex) // VueにVuexを登録

export const store = new Vuex.Store({  //ストアを作成
  state: {
    //アプリケーションの状態を保持する
    // （例）userDataというステート
    userData: {
      id: '',
      email: '',
      name: ''
    }
  },
  mutations: {
   //ステートを更新する
   //アクションから送られた値(payload)をステートのuserDataとして更新するミューテーション
    updateUserDataState (state, payload) {
      state.userData = payload
    },
  },
  actions: {
    // 非同期処理や外部APIとの通信を行い、ミューテーションを呼び出す
    //（例）RailsのAPIコントローラにaxiosでログイン中のユーザーのemailを送り、返ってきたデータを'updateUserDataState'というミューテーションに送るアクション
    getUserProfile({ commit }){
      let email = firebase.auth().currentUser.email;
      axios.post('/api/user/show', {
        email: email
      }).then(res => {
        commit('updateUserDataState', {
          data: res.data
        })
      })
    }
  },
  getters: {
  // ステートから別の値を算出する
  //（例）ステートのuserData.nameに「さん」を付けて返すゲッター
    getUserName: (state) => state.userData.name + "さん"
  }
})

このstore.jsを
main.js

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import store from './store'
import router from './router'

 document.addEventListener('DOMContentLoaded', () => {
   const app = new Vue({
     el: '#id',
     router: router,
     store,   //これ
     render: h => h(App),
   })
 })

このようにmain.jsで適用することで、App.vue以下のどこからでもstoreを呼び出すことが可能になります。


ストア内の各項目を呼び出すには

• ステートは this.$store.state

• ミューテーションは this.$store.commit('ミューテーション名')

• アクションは this.$store.dispatch('アクション名')

• ゲッターはthis.$store.getters.ゲッター名
  
  と記述します。

    methods: {
      saveUserData(){
        this.userData.email = firebase.auth().currentUser.email;
        this.userData.icon_id = this.$store.state.selectedIconId
        axios.post('/api/user/create',{
          user: this.userData
        }).then(res => {
          this.userData = ""
          this.$store.dispatch('getUserProfile') //こんな感じです
          this.$router.push('/')
        })
      }

<p>{{ $store.state.userData.name }} </p> //テンプレートに書くときはthisはいらない

基本はこれくらいか
vuex導入前は状態管理が所謂バケツリレーになっていて、


「親コンポーネントから子にデータを渡してさらにそれを子に……そして子のイベントを親で監視してこのメソッドを……」


みたいなアプリケーション作ってるんだかピタゴラスイッチ作ってるんだか分からない状態だったので導入後はとてもスッキリして感動しました。
小規模なアプリケーションでもvuexは必須だと思います。

より大規模なアプリケーションを作る場合は、モジュールでストアを分割するのが良いらしいです。