Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@hirohero

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つだけ。複数渡したい場合はハッシュにまとめる。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What are the problem?