混入

实例分发

混入minxins参数 提供了一种灵活的方式, 把bui.store的实例进行划分. 它是一个数组, 数组里面每个对象包含bui.store的选项, 实例自身的属性会覆盖mixins的相同属性.

pages/main/main.js

  1. var bs = bui.store({
  2.     id: ".bui-page",
  3.     scope:"page",
  4.     mixins: [{
  5.         data: {
  6.             title:"标题2"
  7.         },
  8.         methods: {},
  9.         watch: {},
  10.         computed: {},
  11.         beforeMount:function(){
  12.             // console.log(this.$data.title)
  13.         },
  14.         mounted:function(){
  15.             console.log(this.$data.title)
  16.         }
  17.     }],
  18.     data: {
  19.         title:"标题"
  20.     },
  21.     methods: {},
  22.     watch: {},
  23.     computed: {},
  24.     beforeMount:function(){
  25.         // console.log(this.$data.title)
  26.     },
  27.     mounted:function(){
  28.         console.log(this.$data.title)
  29.         // 标题
  30.     },
  31. })

改写为 pages/main/main.js

  1. loader.define(["pages/list/index"]function(list,require,export,module){
  2.     var bs = bui.store({
  3.         id: ".bui-page",
  4.         scope:"page",
  5.         mixins: [list],
  6.         data: {
  7.             title:"标题"
  8.         },
  9.         methods: {},
  10.         watch: {},
  11.         computed: {},
  12.         beforeMount:function(){
  13.             // console.log(this.$data.title)
  14.         },
  15.         mounted:function(){
  16.             console.log(this.$data.title)
  17.             // 标题
  18.         },
  19.     })
  20. })

定义列表模块 pages/list/index.js

  1. loader.define(function(require,export,module){
  3.     var data = {
  4.             data: {
  5.                 title:"标题2"
  6.             },
  7.             methods: {},
  8.             watch: {},
  9.             computed: {},
  10.             beforeMount:function(){
  11.                 // console.log(this.$data.title)
  12.             },
  13.             mounted:function(){
  14.                 console.log(this.$data.title)
  15.             }
  16.         }
  17.     // 抛出对象
  18.     return data;
  19. })

通过view标签把模板分发. pages/main/main.html

  1. <view name="pages/list/index"></view>

通过分发出去的view组件, 最终是合并在一个实例上, 模块之间会按先后顺序覆盖, 没有独立的作用域.

独立作用域

需要独立作用域时, 应该使用的是 component标签. 模块里面需要返回一个实例, 而不是普通对象.

  1. <component id="list" name="pages/list/index"></component>

pages/list/index.html

  1. <h2 b-text="list.title"></h2>

pages/list/index.js

  1. loader.define(function(require,export,module){
  2.     // module.id = list
  3.     var bs = bui.store({
  4.         el: `#{module.id}`,
  5.         scope: "list",
  6.         data: {
  7.             title:"标题"
  8.         },
  9.         mounted: function(){
  10.             console.log("list 模块已经加载")
  11.         }
  12.     })
  13.     return bs;
  14. })

案例

在一个模块里面处理三个Tab不好维护, 可以把每个tab的内容进行分发. 这是一个bui.floor跟 bui.store结合的例子. 其中用到了延迟加载, 滚动到第2个的时候, 会自动加载第3个模板, 加载了模板以后, 还需要通过实例的 bs.$mount方法, 重新编译该组件的数据.