組成APIヘルパーでVEEXを使用する

最近、私は新しい車輪を作ることに集中していますuseXXX helpers Vuexのために、そして、私はVuexで貢献することについて考えています、そして、私はそれを見つけました、USExxxヘルパー提案はすでに8ヵ月近く存在します.
チェックアウトhttps://github.com/vueblocks/vue-use-utilities#vuex @vueblocks/vue-use-vuex - 簡単に組成APIを使用してVUEX.それは上に構築vue-demi & @vue/compostion-api . それはVue 2と3の両方のために動作します.

米国農務省

useState - と同じmapState

useGetters - と同じmapGetters

useMutations - と同じmapMutations

useActions - と同じmapActions

useStore

useStore - Vuex 4と同じ.X構成APIuseStore

用途

米国不動産

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useState as you would use mapState
    const { useState } = useVuex()

    return {
      // mix this into the outer object with the object spread operator
      ...useState({
        // arrow functions can make the code very succinct!
        count: state => state.count,

        // passing the string value 'count' is same as `state => state.count`
        countAlias: 'count',

        // to access local state with `this`, a normal function must be used
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      }),
      ...mapState([
        // map count<ComputedRef> to store.state.count
        'count'
      ])
    }
  }
}

使用人

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useGetters as you would use mapGetters
    const { useGetters } = useVuex()

    return {
      // mix the getters into outer object with the object spread operator
      ...useGetters([
        'doneTodosCount',
        'anotherGetter',
        // ...
      ]),
      // if you want to map a getter to a different name, use an object:
      ...mapGetters({
        // map `doneCount<ComputedRef>` to `this.$store.getters.doneTodosCount`
        doneCount: 'doneTodosCount'
      })
    }
  }
}

使用法

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useMutations as you would use mapMutations
    const { useMutations } = useVuex()

    return {
      ...useMutations([
        'increment', // map `increment()` to `this.$store.commit('increment')`

        // `mapMutations` also supports payloads:
        'incrementBy' // map `incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
      ]),
      ...useMutations({
        add: 'increment' // map `add()` to `this.$store.commit('increment')`
      })
    }
  }
}

使用法

import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  // ...
  setup () {
    // Use the useActions as you would use mapActions
    const { useActions } = useVuex()

    return {
      ...useActions([
        'increment', // map `increment()` to `this.$store.dispatch('increment')`

        // `mapActions` also supports payloads:
        'incrementBy' // map `incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
      ]),
      ...useActions({
        add: 'increment' // map `add()` to `this.$store.dispatch('increment')`
      })
    }
  }
}

名前空間

サポート

// Get namespaced component binding helpers in useVuex
import { useVuex } from '@vueblocks/vue-use-vuex'

export default {
  setup () {
    const { mapState, mapActions } = useVuex('some/nested/module')

    return {
      // look up in `some/nested/module`
      ...mapState({
        a: state => state.a,
        b: state => state.b
      })
      // look up in `some/nested/module`
      ...mapActions([
        'foo',
        'bar'
      ])
    }
  }
}

それはよく知られているようです?はい、あなたは考えることができました@vueblocks/vue-use-vuex のラッパーとしてVuex HelpersRead Docs
しかし、私はタイプセーフティについてあまり考えませんでした、そして、私はまだタイプスクリプトを学んでいます.興味があれば、私はそれを改善する助けてください.
PRウェルカム@vueblocks/vue-use-utilities