Skip to content
This repository was archived by the owner on Mar 10, 2025. It is now read-only.

[WIP] Type safe store binding helper #16

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[WIP] Type safe store binding helper #16

wants to merge 10 commits into from

Conversation

ktsn
Copy link
Owner

@ktsn ktsn commented Jan 11, 2018

This PR add a new helper function bindStore (the name may be changed) to create a Vue component that has mapped state/getters/mutations/actions.

The main difference with the existing decorators, the mapped properties/methods can be inferred with its types. It uses the same strategy of vuejs/vuex#1121 which is on going typings improvement of Vuex.

At first, the users should declare module asset types:

// State
export interface CounterState {
  count: number
}

// Getters
// key: getter name
// value: return type of getter
export interface CounterGetters {
  power: number
}

// Mutations
// key: mutation name
// value: payload type of mutation
export interface CounterMutations {
  increment: { amount: number }
}

// Actions
// key: action name
// value: payload type of action
export interface CounterActions {
  incrementAsync: { amount: number, delay: number }
}

Then, create a store-bound component by using bindStore. Make sure you annotate the module types to the function. It can chains some static methods to map module assets on the component:

const Super = bindStore<CounterState, CounterGetters, CounterMutations, CounterActions>()
  .state(['count'])
  .mutations({
    plus: 'increment'
  })
  .create()

Finally, extend the component so that you use typed store assets on the extended component.

class MyComp extends Super {}

const vm = new MyComp({ store })
assert(vm.count === 0)
vm.plus({ amount: 1 })
assert(vm.count === 1)

This should be merged after vuejs/vuex#1121 is released.

fix #2

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feature request] make vuex-class more type safe
1 participant