Add useXXX helpers

[kiaking]

What problem does this feature solve?

Currently, we don't have mapXXX helpers equivalent feature when using Vuex 4 in composition api. It would be nice to have as both a convenience and for better typing support.

What does the proposed API look like?

To smoothly support migration from Vuex 3, at first, we should align with existing mapXXX helpers.

All of the following codes are meant to be used inside setup hook.

useState

const { count, countAlias, countPlusLocalState } = 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
  }
})

We should also support passing an array.

const { count } = useState([
  // map this.count to store.state.count
  'count'
])

useGetters

const { doneTodosCount, anotherGetter } = useGetters([
  'doneTodosCount',
  'anotherGetter'
])

Alias the name by passing an object.

const { doneCount } = useGetters({
  doneCount: 'doneTodosCount'
})

useActions

const { increment, incrementBy } = useActions([
  'increment', // map `increment()` to `store.dispatch('increment')`
  'incrementBy' // map `incrementBy(amount)` to `store.dispatch('incrementBy', amount)`
])

const { add } = useActions({
  add: 'increment' // map `add()` to `store.dispatch('increment')`
})

useMutations

const { increment, incrementBy } = useMutations([
  'increment', // map `increment()` to `store.commit('increment')`
  'incrementBy' // map `incrementBy(amount)` to `store.commit('incrementBy', amount)`
])

const { add } = useMutations({
  add: 'increment' // map `add()` to `store.commit('increment')`
})

Namespacing

All useXXX helpers should support passing namespace as the first argument.

const { a, b } = useState('some/nested/module', {
  a: state => state.a,
  b: state => state.b
})

const { foo, bar } = useActions('some/nested/module', [
  'foo',
  'bar'
])

And finally, useNamespacedHelpers.

const { useState, useActions } = useNamespacedHelpers('some/nested/module')

// look up in `some/nested/module`
const { a, b } = useState({
  a: state => state.a,
  b: state => state.b
})


// look up in `some/nested/module`
const { foo, bar } = useActions([
  'foo',
  'bar'
])

NOTE

There's an issue #1695 that proposes adding useModule helper that returns the whole module as an object. We could do the follow-up PR to tackle this idea as well.

[lmiller1990]

An alternative would be to provide these in a separate library, and users could use to include that, too, if you want to keep core very small and simple.

I like the proposal in general - it mirrors the mapXXX helpers nicely.

[kiaking]

An alternative would be to provide these in a separate library, and users could use to include that, too, if you want to keep core very small and simple.

Ah good point. Maybe something we should think about when designing Vuex 5. As of Vuex 4, mapXXX is already in the core and to align with Vuex 3, I think it makes more sense to have it in the core 👍

[libbGit]

in vuex 4.0.0-beta.2, I don't find useState, just mapState has been given, how do i use mapState it?

[libbGit]

An alternative would be to provide these in a separate library, and users could use to include that, too, if you want to keep core very small and simple.

Ah good point. Maybe something we should think about when designing Vuex 5. As of Vuex 4, mapXXX is already in the core and to align with Vuex 3, I think it makes more sense to have it in the core 👍

how do i use mapXXX?

in the setup function, i can't get the store state.

import { mapState, mapMutations, mapGetters, mapActions } from "vuex"; 
setup(props, context) { 
     let state = mapState("user",["name"]); 
     // state.name is a mappedState function, not a value
}

[kiaking]

You can't use mapXXX helpers inside setup hook. And useXXX helpers are not there too. Please wait until this issue is being tackled! 🙇

[libbGit]

You can't use mapXXX helpers inside setup hook. And useXXX helpers are not there too. Please wait until this issue is being tackled! 🙇

okay， thx， Wishing good news will come soon.

[PatrykWalach]

this is pretty easy to implement, mappedActions have to be bound with $store

const mappedActions = mapActions('user', ['login'])
const store = useStore()
const login = mappedActions.login.bind({ $store: store })

useActions can be created like a so

const useActions = (...args) => {
  const $store = useStore()

  return Object.fromEntries(
    Object.entries(mapActions(...args)).map(
      ([key, value]) => [
        key,
        value.bind({
          $store,
        }),
      ],
    ),
  )
}

and if you use typescript you have to cast all the overloaded types

const useActions = ((...args: [any, any]) => {
  const $store = inject('store')

  return Object.fromEntries(
    (Object.entries(mapActions(...args))).map(
      ([key, value]: [string, ActionMethod]) => [
        key,
        value.bind({
          $store,
        }),
      ],
    ),
  )
}) as Mapper<ActionMethod> &
  MapperWithNamespace<ActionMethod> &
  MapperForAction &
  MapperForActionWithNamespace

the same probably goes for mapMutations

mappedGetters and mappedState in vue 2 work straight up, since this in computed is bound to the instance.

 const getters = mapGetters('updateManager', ['rejected', 'isUpdating'])
 const rejected = computed(getters.rejected)

But if it's necessary in vue 3, this can be bound as well.

 const getters = mapGetters('updateManager', ['rejected', 'isUpdating'])
 const rejected = computed(getters.rejected.bind({ $store: store }))

So useGetters would look like this:

const useActions = (...args) => {
  const $store = useStore()

  return Object.fromEntries(
    Object.entries(mapGetters(...args)).map(
      ([key, value]) => [
        key,
        computed(value.bind({
          $store,
        })),
      ],
    ),
  )
}

and this should be casted with as Mapper<ComputedRef<any>> & MapperWithNamespace<ComputedRef<any>>

All the hooks

import {
mapGetters,
mapState,
Mapper,
MapperWithNamespace,
MapperForState,
MapperForStateWithNamespace,
Computed,
MapperForActionWithNamespace,
MutationMethod,
mapMutations,
mapActions,
MapperForMutationWithNamespace,
MapperForMutation,
ActionMethod,
MapperForAction,
} from 'vuex'
import { ComputedRef, computed, inject } from '@vue/composition-api'

const createActionHook = (
mapFunction: Mapper<any> & MapperWithNamespace<any>,
) =>
((...args: [any, any]) => {
  const $store = inject('store')

  return Object.fromEntries(
    Object.entries(mapFunction(...args)).map(
      ([key, value]: [string, any]) => [
        key,
        value.bind({
          $store,
        }),
      ],
    ),
  )
}) as Mapper<any> & MapperWithNamespace<any>

export const useMutation = createActionHook(mapMutations) as Mapper<
MutationMethod
> &
MapperWithNamespace<MutationMethod> &
MapperForMutation &
MapperForMutationWithNamespace

export const useActions = createActionHook(mapActions) as Mapper<ActionMethod> &
MapperWithNamespace<ActionMethod> &
MapperForAction &
MapperForActionWithNamespace

const createComputedHook = (
mapFunction: Mapper<Computed> & MapperWithNamespace<Computed>,
) =>
((...args: [any, any]) => {
  const $store = inject('store')

  return Object.fromEntries(
    Object.entries(mapFunction(...args)).map(
      ([key, value]: [string, Computed]) => [
        key,
        computed(
          value.bind({
            $store,
          }),
        ),
      ],
    ),
  )
}) as Mapper<ComputedRef<any>> & MapperWithNamespace<ComputedRef<any>>

export const useGetters = createComputedHook(mapGetters) as Mapper<
ComputedRef<any>
> &
MapperWithNamespace<ComputedRef<any>>

export const useState = createComputedHook(mapState) as Mapper<
ComputedRef<any>
> &
MapperWithNamespace<ComputedRef<any>> &
MapperForState &
MapperForStateWithNamespace

[Stoom]

vuex-composition-helpers has a good implementation of this and support for typescript type interfaces

[shawnwildermuth]

The vuex-composition-helpers project only works with Vue 2 as it was said that this is what the API would look like in Vuex 4 but I haven't seen it working.

[Stoom]

I guess my point was the above examples is still missing type safety. This is Paramount to preventing bugs around the store. The library suggested was to demonstrate how you can have type safety... Better yet is a bird architecture that puts types first from the beginning so some crazy advanced typing isn't required.

[shawnwildermuth]

Wouldn't an API like this allow for typesafety:

setup() {
  const { isBusy, count } = useState({
    isBusy: s => s.state.isBusy,
    count: s => s.getters.itemCount  
  });
}

Maybe it's too verbose.

[Stoom]

The problem in the current API is vuex is wrapping things. So you define an action it takes in the action context and the payload. When you use it you only provide a payload and vuex magically fills in the action context. Same for getters and the state argument, and mutations and their arguments.

[shawnwildermuth]

Hmm....so is this an argument against Vuex in general?