New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Type safe store binding helper #16

wants to merge 10 commits into
base: master


None yet
1 participant

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>()
    plus: 'increment'

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){ amount: 1 })
assert(vm.count === 1)

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

fix #2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment