ヘルパーとは?

12643 ワード
Helper mapMutations mapGetters mapActions mapState vuex テキストリンク

mapState, mapGetters, mapMutations, mapActions


mapState


ヘルプ
  • は、Vuexに宣言されたステータス属性をビュー要素に容易に接続する
    //App.vue
<!-- <p>{{ this.$store.state.num }}</p> -->
<p>{{ this.num }} </p>

import { mapState } from 'vuex'

computed(){
  ...mapState(['num'])
  /**
  num() {
  	return this.$store.state.num;
  }
  */
  
// store.js
state: {
  num: 10
}

    mapGetters


    ヘルプ
  • は、Vuexとして宣言されたgetters属性をビュー要素に容易に接続する
    //App.vue
<p>{{ this.reverseMessage }}</p>
// <p>{{ this.$store.getters.reverseMessage }}</p>

import { mapGetters } from 'vuex'
computed() {
  ...mapGetters(['reverseMessage'])
}

//store.js
getters: {
  reverseMessage(state) {
    return state.msg.split('').reverse().join('');
  }
}

    mapMutations


    ヘルプ
  • は、Vuexに宣言された突然変異属性をビューコンポーネントに容易に接続する
    //App.vue
<button @click="clickBtn">popup message</button>

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['clickBtn']),
  authLogin() {},
  displayTable() {}
}

//store.js
mutations: {
  clickBtn(state) {
    alert(state.msg);
  }
}

    mapActions


    ヘルプ
  • は、Vuexに宣言されたactions属性をビュー要素に容易に接続する
    //App.vue
<button @click="delayClickBtn">delay popup message</button>

import { mapActions } from 'vuex'

methods:{
  ...mapActions(['delayClickBtn']),
}

 //store.js
actions:{
  delayClickBtn(context) {
    setTimeout(() => context.commit('clickBtn'),2000);
  }
}

    Helperの使い方

  • ヘルプを使用するvueファイルで、次のようにヘルプ
    • をロードします.
    //App.vue
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' 와 동일
import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
  computed() {
    ...mapState(['num']),
    ...mapGetters(['countedNum'])
  },
  methods: {
    ...mapMutations(['clickBtn']),
    ...mapActions(['asyncClickBtn'])
  }
// ... = Object Spread Operator

    出典:Arnarn)Vue。js中級講座-張基孝

    iOS版GoogleAnalyticsを利用
    CustomStringConvertibleプロトコル