11
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-06-05

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?