Edited at

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

More than 1 year has passed since last update.

最近フロントエンドは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つだけ。複数渡したい場合はハッシュにまとめる。