Vueコンポーネント & Vuex テンプレ

最近フロントエンドはVue.jsで書くのがお気に入りです。
vue-cliを使えば webpack とかの面倒なセットアップの大半が一瞬で終わりますし、 vue-loader で1コンポーネント = 1ファイルにまとめられるから便利です。

ただ、細々とした注意事項が多くてややこしいので自分用にVue ComponentとVuexのテンプレを作っておくことにしました。
各自ご自由にお使いくださいませ。

Vue Component

Componnet.vue

import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'

export default {
  components: {
    xxx,
  },

  data () {
    return {
    }
  },

  // アロー関数不可
  computed: {
    // getterのみ
    xxx: function() {
    },

    // getterとsetter両方
    yyy: {
      get: function(){
      },
      set: function(v){
      }
    },
    // Vuexのgettersをマッピング
    ...mapGetters(['xxx']),

    // Vuexのstateをマッピング
    ...mapState(['xxx'])
  },

  // アロー関数不可
  methods: {
    xxx: function () {
    },

    // Vuexのactionsをマッピング
    ...mapActions(['xxx']),

    // Vuexのmutationsをマッピング
    ...mapMutations(['xxx'])
  },

  // アロー関数不可
  watch: {
    xxx: function() {
    }
  },

  beforeMount() {
  }
}

ポイント

• computed, methods, watchはアロー関数不可。
• Vuex の mapGetters(), mapState(), mapActions(), mapMutations() ヘルパを使うと、コンポーネントからVuexの直接参照を隠すことができる。

Vuex

sotre.js

export default new Vuex.Store({
  // strictモード。
  // 本番環境は無効にしておく。
  strict: process.env.NODE_ENV !== 'production',

  state: {
  },

  // stateに対する算出プロパティ
  // stateを直接触れる。
  getters: {
    // 引数なし
    xxx: (state, getter) => {
    },

    // 引数あり
    xxx: (state, getters) => (v) => {
    }
  },

  // dispatch()で呼び出される。
  // stateの直接触れてはいけない。
  // 非同期処理可
  actions: {
    // パラメータは、1つのハッシュ（オブジェクト）にまとめる。
    xxx (context, payload) {
      context.commit('xxx')
    }
  },

  // commit()で呼び出される。
  // stateを直接触れる。
  // 非同期処理不可
  mutations: {
    // パラメータは、1つのハッシュ（オブジェクト）にまとめる。
    xxx: (state, payload) {
    }
  }
})

ポイント

• actions, mutations に引き渡されるパラメータはpayload1つだけ。複数渡したい場合はハッシュにまとめる。