セキュリティ系の勉強・その他開発メモとか雑談. Twitter, ブログカテゴリ一覧
本ブログはあくまでセキュリティに関する情報共有の一環として作成したものであり,公開されているシステム等に許可なく実行するなど、違法な行為を助長するものではありません.

【rails_vue_melt】Vuexを使う&管理

//


はじめに

前回はrails_vue_meltというgemを利用してRailsvue.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