如何快速上手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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
JS实现吸顶特效
Jan 08 Javascript
js实现验证码干扰(静态)
Feb 22 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
javascript call和apply方法
2008/11/24 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
js原型链原理看图说明
2012/07/07 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
python模拟Django框架实例
2016/05/17 Python
pandas重新生成索引的方法
2018/11/06 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
房屋转让协议书
2014/10/18 职场文书
关于观后感的作文
2015/06/18 职场文书
各国货币符号大全
2022/02/17 杂记
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers