如何快速上手Vuex


Posted in Javascript onFebruary 14, 2017

在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

为了展示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更新数据流程:

 如何快速上手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实例传递进去。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 #Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 #Javascript
Vue组件开发初探
Feb 14 #Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 #Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
express.js中间件说明详解
2019/03/19 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python处理Excel文件实例代码
2017/06/20 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Python阶乘求和的代码详解
2020/02/14 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
自我鉴定范文
2013/11/10 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Python基础知识学习之类的继承
2021/05/31 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL