美文网首页
vuex-class用法

vuex-class用法

作者: _sands | 来源:发表于2019-07-31 11:52 被阅读0次

    vuex-class可以包装vuex的写法,使代码简化

    Installation

    $ npm install --save vuex-class

    Example

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import {
      State,
      Getter,
      Action,
      Mutation,
      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
    
      // If the argument is omitted, use the property name
    
      // for each state/getter/action/mutation type
    
      @State foo
    
      @Getter bar
    
      @Action baz
    
      @Mutation qux
    
      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['module/foo']
    
      }
    
    }
    
    

    相关文章

      网友评论

          本文标题:vuex-class用法

          本文链接:https://www.haomeiwen.com/subject/ntuzrctx.html