はじめに

前回はrails_vue_meltというgemを利用してRailsにvue.jsを導入しました。今回はVuexをいい感じに管理しようと思います。が、もっと良いわけたかがあると思うので、普段使いしている方は自分のやり方でお願いします。。。

thinline196.hatenablog.com

階層構造

最終的にこんな感じになりました。

    ├── application.js
    └── vue_melt
        ├── application.js
        ├── components
        │   └── Hello.vue
        ├── mixins
        ├── options
        │   └── test_counter.js
        └── store
            ├── counts
            │   ├── actions.js
            │   ├── getters.js
            │   ├── index.js
            │   └── mutations.js
            └── index.js

中身

呼び出す人

options/test_counter.jsが今回Vuexを使いたい人です。

// app/frontend/packs/vue_melt/options/test_counter.js
import {mapActions,mapState,mapGetters} from 'vuex'
import countsModule from '../store/counts'

export default {
  data:()=>({}),
  components: {
    counts: countsModule
  },
  computed: {
    ...mapState({
      clickCount: state => state.counts.clickCount
    }),
    ...mapGetters({
      getCount:"counts/getCount"
    })
  },
  methods: {
    ...mapActions({
      increment: "counts/increment",
      initTo:"counts/initTo"
    }),
    Increment(){
      this.increment()
    },
    InitTo(value){
      this.initTo(value)
    }
  }
}

大元

ここstore/index.jsでこれから作っていくであろうVuexのモジュールを呼び出します。今回はcountsという単純に数字をカウントするものをモジュールにまとめようと思います。

// app/frontend/packs/vue_melt/store/index.js
import Vue from 'vue/dist/vue.esm'
import Vuex from 'vuex'
import countsModule from './counts'

Vue.use(Vuex)

const state = {

}

export default new Vuex.Store({
  state,
  modules: {
    counts: countsModule //ここにどんどん使いしていきます。
  }
})

countsモジュールの中身

store/counts/index.jsでモジュール内のものをまとめています。また、モジュール内で触るデータの定義はここで行いました。

// app/frontend/packs/vue_melt/store/counts/index.js
import actions from './actions'
import getters from './getters'
import mutations from './mutations'

export const state = () =>({
  clickCount: 0
})

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

getters.jsにはVuexに保存してあるデータを読み込み時使うものを定義して基本ここ経由でのみgetするそうです。

// app/frontend/packs/vue_melt/store/counts/getters.js
export default {
  getCount(state){
    return state.clickCount
  }
}

mutations.jsにはVuexに保存してあるデータに変更を加える時に使うメソッドを定義します。ここ経由でのみデータの書き換えを許可します。

//app/frontend/packs/vue_melt/store/counts/mutations.js
export default {
  increment(state){
    state.clickCount++
  },
  initTo(state,value) {
    state.clickCount = value
  }
}

actions.jsには、ビュー側からmutationsをいじるためのメソッドを定義します。ビュー側からはここに定義したもの経由でのみmutationsを呼び出すことを許可するようです。

// app/frontend/packs/vue_melt/store/counts/actions.js
export default {
  increment ({commit}){
    commit('increment')
  },
  initTo({commit},value){
    commit('initTo',value)
  }
}

使ってみる

vue_meltも含めてこんな感じで呼べました。

.t(data-vue="test_counter")
  input.inc(type="button" v-on:click="increment" value="inc") {{getCount}}
  input.reset(type="button" v-on:click="initTo(0)" value="reset")

わかりにくいですがスクショも。 f:id:thinline196:20191203174247p:plain