如何快速上手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 相关文章推荐
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
跟我学习javascript的循环
Nov 18 Javascript
js 求时间差的实现代码
Apr 26 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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 OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python 系统调用的实例详解
2017/07/11 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
酒店管理专业自荐信
2014/05/23 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年教研室工作总结
2014/12/06 职场文书
道德模范事迹材料
2014/12/20 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
刑事附带民事代理词
2015/05/25 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技