vuex-class.js 0.1.0版本支持在组件中连接class了

时间:2021-1-8 作者:admin

Use es6 class to write the vuex module, making the code easier to maintain and expand.

Installing

npm install vuex-class.js --save

Document

Example

import Vue from 'vue'
import Vuex from 'vuex'
import VuexClass from 'vuex-class.js'

Vue
  .use(VuexClass)
  .use(Vuex)

class One extends VuexClass {
  constructor () {
    super()
    this.strict = process.env.NODE_ENV !== 'production'
    this.state = {
      count: 0
    }
    // Note: the sub module has no plugins option
    this.plugins = [
      VuexClass.init()
    ]
    this.modules = {
      two: new Two()
    }
  }
  // mutations
  set setCount (count) {
    this.state.count = count
  }
  // getters
  get countText () {
    return `text:${this.state.count}`
  }
  // actions
  clickCount () {
    setTimeout(() => {
      // Two methods to submit mutation
      // 1、Direct assignment
      // this.setCount = 1000
      // 2、Call method, note: if there is a get setCount attribute on class, this method does not exist.
      // this.setCount(1000)
    })
  }
}

class Two extends VuexClass {
  constructor () {
    super()
    this.state = {
      isBtn: false
    }
    this.modules = {
      three: new Three()
    }
    this.namespaced = true
  }
  set switchBtn (payload) {
    this.state.isBtn = !this.state.isBtn
  }
  get text () {
    return this.state.isBtn ? 'true' : 'false'
  }
}

class Three extends VuexClass {
  constructor () {
    super()
    this.state = {}
    this.namespaced = true
    // ...
  }
}

const one = new One()
const store = new Vuex.Store(one)

console.log(one.countText) // 'text:0'
console.log(one.modules.two.text) // 'false'

one.setCount = 666
one.modules.two.switchBtn()
console.log(one.countText) // 'text:666'
console.log(one.modules.two.text) // 'true'

const vm = new Vue({
  store,
  vuexClass: one,
  mapVuexClasses: { // Join the class in the component
    one: '',
    two: 'two',
    three: 'two/three'
  }
})

console.log(vm.one === one) // true
console.log(vm.two === one.modules.two) // true
console.log(vm.three === one.modules.two.modules.three) // true

API

  • VuexClass.init()
    When the store instance is created, the call

      const store = new Vuex.Store({
        // ...
        plugins: [
          VuexClass.init()
        ]
      })
    
  • VuexClass.bindClass(new Vuex.Store())
    When replacing the root state of store, we need to re bind class.

      const store = new Vuex.Store({
        // ...
        state: {
          // ...
        },
        plugins: [
          VuexClass.init()
        ]
      })
      store.replaceState({
        // ...
      })
    store.replaceState()
    VuexClass.bindClass(store)
    
  • VuexClass.mapVuexClasses(new VuexClass(), { ... })
    The 0.0.6 version is added to find the module and its sub modules, and return the relevant class.

      const classes = VuexClass.mapVuexClasses(one, {
        one: '',
        two: 'two',
        three: 'two/three'
      })
    
      console.log(classes.one === one) // true
      console.log(classes.two === one.modules.two) // true
      console.log(classes.three === one.modules.two.modules.three) // true

License

MIT

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。