Skip to content
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

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 join this conversation on GitHub. Already have an account? Sign in to comment
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