如何快速上手Vuex

在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.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更新数据流程：

 

• dispatch可以是view视图中触发，也可以是程序业务逻辑来触发
• actions通过commit方法发出一个改变事件
• mutations中具体操作state的改变
• state的改变通过getter暴露给view，state改变后会立即通知用getter关联起来的view。
• 创建一个vuex.store的实例，用于vue实例。

二、实现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
});

• 视图中引入了app这个全局组件
• 生成vue实例的时候将vuex中创建的store实例传递进去。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！