vue-vuexの補助関数

1389 ワード

vuexは補助関数を提供して膨大なvuexデータを処理して、mapState、mapGetters、mapMutations、mapActions、実際にstate、getters、mutations、actionsを1つの配列に統合して、一度に返します
注意:mapState、mapGettersは属性を返しますのでcomputedに混入、mapMutations、mapActionsはメソッドを返し、methodsに混入するしかありません




import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: 'App',
  mounted(){
    console.log(mapGetters(['user']).user.call(this))
  },
  computed:{
    ...mapGetters(['user']),   //mapGetters(['user'])  this.$store.getters.user  ，       
    // user(){
    //   return this.$store.getters.user
    // }
  }
}

補助関数を使用するのは、vuexのgettersなどの関数をvueにマッピングし、呼び出すときにthisを使用する.userはthis.$を呼び出すことができます.store.getters.user関数、パラメータ伝達時に通常のパラメータ伝達
注意:コンポーネントではthis.$store.dispatch('xxx')を使用してactionを配布するか、mapActions補助関数を使用してコンポーネントのmethodsをstore.dispatch呼び出しにマッピングできます.

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment' //    this.increment()   this.$store.dispatch('increment')
    ]),
    ...mapActions({
      add: 'increment' //    this.add()   this.$store.dispatch('increment')
    })
  }
}

Vue Element table動的にカラムを生成し、値を割り当てる

VUEサブコンポーネントは、親コンポーネントに複数の値を渡す