vuex-class.js

vuex-class.js

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

Installing

npm install vuex-class.js --save

Document

• English
• 中文

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