在Mvc模式大行其道的今天，后端通过各种Mvc框架实现视图与数据模型的隔离，而前端这方面也发展迅速。vue实现了Dom与viewmodel双向绑定，使其视图的更新影响模型，模型的更新影响视图，你会不会觉得这就是Mvc库呢，实则不然，因为他还差一个重要的C(也就是控制器)。以下是鄙人对Mvc的个人理解，如有失误还请各位道友指正。
- M：模型用于表示各种事物及事物特性的数据
- v：view + viewmodel，此处鄙人认为v不能单纯的理解为视图，而应该是视图+视图模型。
- c：控制器，用于协调M与v之间的关系。
第一部分：我对vuex的理解
这个重要的C是谁呢，鄙人认为就是此文章要介绍的Vuex。如此理解也是可以的：vue + vuex = 前端mvc框架
flux(单向数据流)
- actions：一个动作，可以是view创建的，也可以是程序其他逻辑创建的
- dispatcher：将业务逻辑与用户界面分离，负责响应action动作事件，并意向传遍整个系统
- store：业务逻辑处理
- view：视图
vuex是借鉴了flux、redux、The Elm Architecture等相关思想。
第二部分：揭开vuex面纱
本示例实现为一个输入框动态向下拉列表增加选择项的功能，先看效果图：
为了展示vuex的作用，此示例你可以看到如下内容：
- 两个局部组件：输入和下拉列表组件
- 一个全局组件：App，也是整个Vue实例的顶级组件
- 一个jquery.js和bootstrap.js，用于实例下拉组件，jquery只辅助用于bootstrap。
- 还有一个bootstrap.css，用于美化样式。
一、实现vuex的store实例
自动附加到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
});
@H_502_62@
vuex更新数据流程：
- dispatch可以是view视图中触发，也可以是程序业务逻辑来触发
- actions通过commit方法发出一个改变事件
- mutations中具体操作state的改变
- state的改变通过getter暴露给view，state改变后会立即通知用getter关联起来的view。
- 创建一个Vuex.Store的实例，用于Vue实例。
二、实现vue的组件
添加")]);
}
};
//下拉列表组件
var ComboComp = {
render:function(createElement){
var self = this;
return createElement("div",{
attrs:{
"data-id": "ComboComp"
},class:{
"dropdown":true
},[
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:'
1.inputComp(局部组件)：提供输入
2.ComboComp(局部组件)：实现列表内容的展示
3.App(全局组件)：顶级组件，组合inputComp和ComboComp组件。
4.组件参数说明：
render：返回一个组件，其中包含视图，data等。this为vue实例，参数是createElement方法，用于创建VNode。
5.重点关注inputComp组件中button子元素的on中的click方法，内部用dispatch触发了store中对应Id的actions。
