ModelOption

• model: string required，要导入的 model 的 modelName
• states: array[StatePath] | boolean，查看 StatePath
  • 值为 array， 注入指定的 state
  • states 的注入，决定着 getters、actions、mutations 是否能正常执行
• getters: object{computedName: StatePath}
  • 通过 computed 实现
  • 将检查是否导入了指定的 state，但不能严格确保正常执行

• actions: array[string] | object{module: array[string]} | boolean

  • 值为 false， 不注入任何 action
  • 值类型为 array，注入指定的 action，但会检查是否导入了归属 module 的 state

  • 值类型为 object，注入指定 module 的 action，但会检查是否导入了归属 module 的 state

  • 未声明 actions 时，将注入 states 归属 module 的所有 actions

  • action 注入 vm.$model 对象
  • action 注入 vm.$model.modelName 对象，当和其他 model 的注入方法重名时可通过它调用
• actionAlias: Alias

• mutations: array[string]

  • 值类型为 array， 注入指定的 mutation，但会检查是否导入了归属 module 的 state

  • 未声明 mutations 时，将不注入

  • mutation 注入 vm.$model 对象，当 mutation 与 actions 重名时，action 拥有更高优先级
  • mutation 注入 vm.$model.modeName 对象，当和其他 model 的注入方法重名时可通过它调用
• mutationAlias: Alias

Example

Vue.component('SupplierList', {
  template: `
    <article>
      <form>
        <legend>Query</legend>
        <div class="form-group">
          <input name="supplierName" v-model="query.companyName" />
          <span class="validate-error">{{ validateError.supplierName }}</span>
        </div>

        <div class="form-group">
           <select name="department" v-model="query.departmentId">
             <option v-for="dept in allDepartments" :value="dept.id">{{ dept.name }}</option>
           </select>
        </div>
      </form>
    </article>
  `,
  modello: [{
    model: 'Supplier',
    states: [
      'supplierList'
    ],
    getters: {
      validateError: 'supplierList.validateError.query',
      query: 'supplierList.query'
    },
    actions: [
      'querySupplierList',
      {
        'queryValid': 'supplierListQueryValid'
      }
    ],
    mutations: ['updatePage']
  },{
    model：'Service',
    actions: ['getAllDepartments']
  }],

  created () {
    this.$model.querySupplierList()
    this.$model.getAllDepartments()
  },

  data () {
    return {
      // auto inject data
      // Supplier: {
      //   supplierList: {
      //     list: {
      //       total: 0,
      //       data: [], 
      //     },
      //     validateError: {
      //       query: {}
      //     },
      //     query: {
      //       departmentId: '',
      //       companyName: ''
      //       pageIndex: 1,
      //       pageSize: 20
      //     }
      //   }
      // }
      // 
      allDepartments: []
    }
  },

  // auto inject computed
  // computed: {
  //   validateError () { return this.Supplier.supplierList.validateError.query },
  //   query () { return this.Supplier.supplierList.query }
  // }

  methods: {
    onPageChange (pageIndex, pageSize) {
      if (this.$model.queryValid()) {
        this.$model.updatePage(pageIndex, pageSize)
        this.$model.querySupplierList()
      }
    }
  }
})