在Mvc模式大行其道的今天，后端通过各种Mvc框架实现视图与数据模型的隔离，而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定，使其视图的更新影响模型，模型的更新影响视图，你会不会觉得这就是Mvc库呢，实则不然，因为他还差一个重要的C(也就是控制器)。以下是鄙人对Mvc的个人理解，如有失误还请各位道友指正。
第一部分：我对vuex的理解
这个重要的C是谁呢，鄙人认为就是此文章要介绍的Vuex。如此理解也是可以的：vue + vuex = 前端mvc框架
flux(单向数据流)
vuex是借鉴了flux、redux、The Elm Architecture等相关思想。
第二部分：揭开vuex面纱
本示例实现为一个输入框动态向下拉列表增加选择项的功能源码下载地址，先看效果图：
为了展示vuex的作用，此示例你可以看到如下内容：
一、实现vuex的store实例
//Vue.use(Vuex);//如果是window引入方式，vuex会自动附加到Vue上。var state = { list: [{"id":1, "name": "001"}]};var mutations = { ADDITEM: function(argState, item){ argState.list.push(item); }};var getters = { getList:function(argState){ return argState.list; }}var actions = { addItem:function(dis,item){ dis.commit('ADDITEM',item); }}var _storeObj = new Vuex.Store({ "state": state, "mutations": mutations, "getters": getters, "actions": actions});vuex更新数据流程：
二、实现vue的组件
var inputComp = { render:function(createElement){ var self = this; return createElement('div',{ attrs:{ "data-id": "001" }, class:{ "form-inline":true }, style:{ "display": "inline-block" } },[createElement('input',{ attrs:{ type: 'text' }, class:{ "form-control": true }, domProps:{ value: self.value }, on:{ input:function(event){ self.value = event.target.value; } } }),createElement('button',{ on:{ "click": function(event){ self.$store.dispatch('addItem',{"id":2,"name": self.value}); } }, class:{ "btn":true, "btn-primary": true }, domProps:{ type: 'button' } },"添加")]); }};//下拉列表组件var ComboComp = { render:function(createElement){ var self = this; return createElement("div",{ attrs:{ "data-id": "ComboComp" }, class:{ "dropdown":true }, style:{ "display": "inline-block" } },[ createElement("button",{ class:{ "btn": true, "btn-default": true, "dropdown-toggle": true }, attrs:{ "type": "button", "id": "dr02", "data-toggle": "dropdown" } },[ createElement("span", "选择"), createElement("span",{ class:{ "caret":true } })]) , createElement("ul", { class:{ "dropdown-menu":true }, attrs:{ "aria-labelledby":"dr02" } }, self.$store.getters["getList"].map(function(item){ return createElement("li",item.name); })) ]) }};Vue.component('App',{ template:'<div class="wrap" ><ComboComp></ComboComp> <InputComp></InputComp></div>', components:{ "InputComp": inputComp, "ComboComp": ComboComp }});1.inputComp(局部组件)：提供输入
2.ComboComp(局部组件)：实现列表内容的展示
3.App(全局组件)：顶级组件，组合inputComp和ComboComp组件。
4.组件参数说明：
render：返回一个组件，其中包含视图，data等。this为vue实例，参数是createElement方法，用于创建VNode。
5.重点关注inputComp组件中button子元素的on中的click方法，内部用dispatch触发了store中对应Id的actions。
createElement('button',{on:{ "click": function(event){ self.$store.dispatch('addItem',{"id":2,"name": self.value}); }}三、输出
html部分代码：
<div class="wrap" id="app"> <App></App></div>
js部分代码：
var _vue = new Vue({ el: '#app', store: _storeObj});以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！
新闻热点
疑难解答
