Binding helpers for Vuex and vue-class-component
npm install vuex-class-decorator- Vue
- Vuex
- vue-class-component
``bash`
$ npm i -S vuex-class-decorator
`js
import Vue from 'vue'
import {
State,
Getter,
Action,
Mutation,
GetterSetter,
Component,
namespace
} from 'vuex-class'
const someModule = namespace('path/to/module')
@Component
export class MyComp extends Vue {
@State('foo') stateFoo
@State(state => state.bar) stateBar
@Getter('foo') getterFoo
@Action('foo') actionFoo
@Mutation('foo') mutationFoo
@someModule.Getter('foo') moduleGetterFoo
@GetterSetter('getterKey','setterKey') gsFoo //getterKey ---> getters , setterKey --> actions
// If the argument is omitted, use the property name
// for each state/getter/action/mutation type
@State foo
@Getter bar
@Action baz
@Mutation qux
@GetterSetter gsBar
@someModule.GetterSetter name
created () {
this.stateFoo // -> store.state.foo
this.stateBar // -> store.state.bar
this.getterFoo // -> store.getters.foo
this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
this.moduleGetterFoo // -> store.getters['path/to/module/foo']
this.gsBar // -> store.getters.gsBar
this.gsBar = 1 // -> store.dispatch('gsBar', 1)
this.gsFoo = 'test' // -> store.dispatch('setterKey', 'test')
this.name // -> store.getters['path/to/module/name']
this.name = 'myname' // -> store.dispatch('path/to/module/name', 'myname')
}
}
``
MIT