vue-twig：用于vue.js的数据mvc的model层插件,区别于单项数据流的另一种体验
发布于 7 年前 作者 weivea 3917 次浏览 来自 分享

vue-twig

用于vue.js的数据mvc的model层插件,区别于单项数据流的另一种体验, 属于mvc思想的优化,个人这么理解 同时提供localStorage,sessionStorage本地存储功能

github

https://github.com/weivea/vue-twig

demo

todomvc:https://weivea.github.io/vue-twig/

install

npm install vue-twig --save

usage


//初始化
import Vue from 'vue'
import twig from 'vue-twig'
import co from 'co'  //运行Generator函数需要,不需要则不引入
import app from './app'

var model = {
              key: "model名",
              saveType: twig.saveType.localStorage,//存储类型.localStorage/sessionStorage
              dataFun: function (data) {//可以是普通函数,Generator函数(需要co模块),async函数
                //data:缓存的数据

                //生成初始化数据

                return data;//返回初始化的数据
              }
            }

Vue.use(twig, model, [co])//co为可选参数
//或
Vue.use(twig, [model1,model2,moel3 ...],[co])

//数据初始化成功后创建应用实例
twig.ready(function () {
  window._App = new Vue({
      el: '#container',
      components: {
        app
      },
      render (h) {
        return (
          <app/>
        )
      }
    })
})




//组件接入子model
//app.js

export default {
  name: 'app',
  data: function () {
    //接入twig,可选择性接入
    var twigs= this.$twigWarp({
      session: this.$twig.session,
      storage: this.$twig.storage,
      dataTree: this.$twig.dataTree
    })

    //私有data
    var privates={
        a:1,
        b:2
    }
    return Object.assign(twigs,privates)
  },

  //只读型接入介，
  computed: {
      formA: function () {
          return this.$twig.session.form.a
      }
  },
  ...
}

warning

1:twig的接入具有非常大的灵活性,随意操作也会带来问题,像redux也是有『数据操作强约束』的,不能改变 store的数据结构,twig同样如此;

2:data中接入的twig数据要求是对象(索引类型),接入值类型不能触发深入式响应,当然计算属性可以接入值类型;

3:被接入的twig根节点强制不允许被赋值操作;

描述

twig并不是一个"开发便利性","性能"都超越vuex或其它流程插件的这样一个定位东西. twig是在mvc的开发思想上,做了进一步模块功能的开发细分:以此达到优化开发流程的目的. 提供一种异于『绝对的单项数据流』的新的开发思维卡供选择

大致思想如下:

  • 应用总的数据由twig管理,根据功能分成不同的model;
  • web应用根据功能和视图划分为不同的组件(component),接入对应的model,形成映射关系. 在单个组件中,只关心组建内model的数据;
  • 组件的view由model数据驱动,对组件内model的操作,就是对twig中model的操作;
  • 单个组建内部,使用什么样的数据操作流程都没有关系;

数据接入 1.pic.jpg 接入简化 3.pic.jpg 深入分解 2.pic.jpg

固有的mvc因为在复杂页业务场景不好管理model与view之间的关系,twig将程序整体划分为一个一个小的相对独立的子mvc,这样一定程度的解决了 原有mvc模式的复杂性,又保留了model与view的直接联系.

这里借鉴了angular.js的rootScope的思想.只是我们每个组件(component/controller)只接触和自己相关的数据;

基于vue深入式相应的特性,组件对model的修改,可触发所有接入该model的组件view的更新;

程序的设计应以model数据结构为准则, 组件(component)不得修改model的数据结构（flex,redux 亦然）,

回到顶部