【rails_vue_melt】Vuexを使う&管理
//
はじめに
前回はrails_vue_melt
というgem
を利用してRails
にvue.js
を導入しました。今回はVuex
をいい感じに管理しようと思います。が、もっと良いわけたかがあると思うので、普段使いしている方は自分のやり方でお願いします。。。
階層構造
最終的にこんな感じになりました。
├── 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")
わかりにくいですがスクショも。