Skip to content
A public method used to two-way computed property
JavaScript Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
build
dist
src
.gitignore
LICENSE
README.md
package.json
yarn.lock

README.md

desc

A public method used to two-way computed property

support modules

api

  • mapStateModelValuesInStrict will commit a mutation with value
  • mapStateModelValuesInStrictWithPayload will commit a mutation with payload

online demo

simple

use

  • simple
  import { mapStateModelValuesInStrict, mapStateModelValuesInStrictWithPayload } from 'vuex-mapstate-modelvalue-instrict'

  // single, you can pass a get function
  // mapStateModelValuesInStrict(modelValue, stateName, mutationType[, {getFn}])
  computedProps = mapStateModelValuesInStrict('test', 'test', 'updateTest')
  /**
    computedProps = {
      test: {
        get: function(){
          return this.$store.state.test
        }, 
        set: function(value){
          this.$store.commit('updateTest', value)
        }
      }
    }
  */
  • commit mutation with payload
  // commit with payload
  computedProps = mapStateModelValuesInStrictWithPayload('test', 'test', 'updateTest')
  /**
    computedProps = {
      test: {
        get: function(){
          return this.$store.state.test
        }, 
        set: function(value){
          this.$store.commit('updateTest', {
            test: value
          })
        }
      }
    }
  */
  • get with custom function
  let getFn = function(state, modelValue, stateName){
    return state.obj.msg
  }
  computedProps = mapStateModelValuesInStrict('test', 'test', 'updateTest', {getFn})
  /** 
    computedProps = {
      test: {
        get: function(){
          return getFn(this.$store.state, 'test', 'test')
        }, 
        set: function(value){
          this.$store.commit('updateTest', value)
        }
      }
    }
  */
  • mutiple
  //GetFn1 has a higher priority than getFn
  let getFn1 = function(state, modelValue, stateName) {
    switch (modelValue) {
      case 'info':
        return state.obj.info
      case 'testModel':
        return state.test
      default:
        return state[stateName]
    }
  }
  computedProps = mapStateModelValuesInStrict([['testModel', 'test', 'updateTest'], ['info', 'info', 'updateInfo', {getFn}]], {getFn: getFn1})
  /** 
    computedProps = {
      test: {
        get: function(){
          return getFn1(this.$store.state, 'testModel', 'test')
        }, 
        set: function(value){
          this.$store.commit('updateTest', value)
        }
      },
      info: {
        get: function(){
          return getFn(this.$store.state, 'info', 'info')
        }, 
        set: function(value){
          this.$store.commit('updateInfo', value)
        }
      }
    }
  */
  • you can set modulePath in opts
  computedProps = mapStateModelValuesInStrict([['testModel', 'test', 'updateTest'], ['info', 'info', 'updateInfo', {modulePath: 'form/obj'}]], {modulePath: 'form', param: {root: true}})
  /** 
    computedProps = {
      test: {
        get: function(){
          return this.$store.state.form.test
        }, 
        set: function(value){
          this.$store.commit('form/updateTest', value, {root: true})
        }
      },
      info: {
        get: function(){
          return this.$store.state.form.obj.test
        }, 
        set: function(value){
          this.$store.commit('form/obj/updateInfo', value, {root: true})
        }
      }
    }
  */
  • you can use getFn for modules
  let getFn2 = function (state, moduleName, stateName) {
    if (moduleName === 'testModel') {
      return state.form.updateTest
    }
    if (moduleName === 'info') {
      return state.form.obj.info
    }
  }
  computedProps = mapStateModelValuesInStrict([['testModel', 'test', 'form/updateTest'], ['info', 'info', 'form/obj/updateInfo']], {getFn: getFn2})
  /** 
    computedProps = {
      test: {
        get: function(){
          return getFn2()
        }, 
        set: function(value){
          this.$store.commit('form/updateTest', value)
        }
      },
      info: {
        get: function(){
          return getFn2()
        }, 
        set: function(value){
          this.$store.commit('form/obj/updateInfo', value)
        }
      }
    }
  */
  • mixin result to computed
  const config = {
    computed: {
      //.....some computed methods
    }
  }

  Object.assign(config.computed, computedProps)
  export default config

License

MIT

You can’t perform that action at this time.