Vuex原来可以这样上手
时间:2022-04-22
本文章向大家介绍Vuex原来可以这样上手,主要内容包括第一部分:我对vuex的理解、第二部分:揭开vuex面纱、二、实现vue的组件、三、输出、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会觉得这就是Mvc库呢,实则不然,因为他还差一个重要的C(也就是控制器)。以下是鄙人对Mvc的个人理解,如有失误还请各位道友指正。
- M:模型用于表示各种事物及事物特性的数据
- v:view + viewModel,此处鄙人认为v不能单纯的理解为视图,而应该是视图+视图模型。
- c:控制器,用于协调M与v之间的关系。
第一部分:我对vuex的理解
这个重要的C是谁呢,鄙人认为就是此文章要介绍的Vuex(如果你想初识vue,可以移步vue原来可以这样上手这篇博文)。如此理解也是可以的: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
}
});
- inputComp(局部组件):提供输入
- ComboComp(局部组件):实现列表内容的展示
- App(全局组件):顶级组件,组合inputComp和ComboComp组件。
- 组件参数说明:
- render:返回一个组件,其中包含视图,data等。this为vue实例,参数是createElement方法,用于创建VNode。
- 重点关注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实例传递进去。
- tensorflow(一)windows 10 64位安装tensorflow1.4与基本概念解读tf.global_variables_initializer
- 容灾切换中的数据库宕机问题简单分析(一) (r9笔记第12天)
- Java面试系列14
- linux下搭建django记录笔记,未完稿,节后继续
- Java案例-打印图形与π
- 关于两个简单问题的分析(r9笔记第10天)
- 初步解读Golang中的接口相关编写方法
- Go语言获取Windows下文件是否隐藏
- Java案例-求a+aa+aaa+.......+aaaaaaaaa=?
- 【Go 语言社区】算法课程 第一季 第6节 建立三角形
- 最近的几个技术问题总结和答疑(五)(r9笔记第9天)
- hive学习笔记——Hive表中数据的导入和导出
- Java案例-求和与打印九九乘法表
- hive学习笔记——Hive表的创建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring IoC 容器扩展
- Spring IoC 容器基础使用
- Nginx共享内存剖析及开源项目分享
- ceph object_cacher源码分析
- 太实用了!自己动手写软件——我们的密码破解器终于完成了
- RabbitMQ 快速入门实战
- 在终端打印地图
- Loki漫谈
- 聊聊dubbo-go的TokenFilter
- 面试 | 卡掉不少人的一道腾讯算法面试题,高手来试试?
- 面试 | 百度测试开发岗位面试题目回顾
- ESP8266简单介绍
- 基于MTCNN和MobileFaceNet实现的人脸识别
- 学习 | egg.js 从入门到精通
- 形式化分析工具AVISPA(三)学习User micro-manual of AVISPA