vuex-mapstate-modelvalue-instrict
A public method used to two-way computed property
Last updated 3 years ago by fsy0718 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vuex-mapstate-modelvalue-instrict 
SYNC missed versions from official npm registry.

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

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

Current Tags

  • 0.0.4                                ...           latest (3 years ago)

4 Versions

  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 4
Dependencies (5)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |