自定义vue全局组件use使用、vuex的使用详解


Posted in Javascript onJune 14, 2017

自定义vue全局组件use使用(解释vue.use()的原理)

我们在前面学习到是用别人的组件:Vue.use(VueRouter)、Vue.use(Mint)等等。

其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理

而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用:

总结目录:

|-components

|-loading

|-index.js 导出组件,并且install

|-loading.vue 定义Loading组件,这里面基本的style ,script中之前讲的methods,data方法都可以使用

index.js中的代码:

import LoadingComponent from './loading.vue'
const Loading={


install:function(Vue){ //核心部分,在我们使用Vue.use()时,自动调用的是install,而install导出的必须是的组件
 

Vue.component('loading',LoadingComponent);

}
 };
export default Loading;

 main.js中要使用:

import loading from './components/loading'

Vue.use(loading); //调用的是install里面的组件

 vuex的使用:

 官方文档:http://vuex.vuejs.org

vuex:主要用来集中式管理组件状态,(如组件显示/隐藏,增加/减少)

1)启动一个项目

2)安装vuex:cnpm install vuex -D

 3)vuex提供了两个非常好的方法:

  1. mapActions():可以将所有methods里面的方法,进行打包。即对所有的事件(或我们的行为)进行管理
  2. mapGetters:获取所有的数据,对所有的数据进行管理

4)vuex的工作过程:

1.当用户点击时,会调用increment函数(即用户有一个动作dispatch)mapActions将函数(动作dispatch)提交到actions里面,并且传了commit这个参数(也是一个函数)

2.commit主要处理你要做什么,比如异步请求,判断,流程控制等,commit会将这些请求、状态提交到mutations里面

3.mutations主要用来处理状态(数据)的变化

4.mapGetters获取目前数据,将状态(数据)提交到getters上面,给mutations使用,让数据发生变化,并返回(render),从而更新视图

5)actions里面除了含有commit这的对象参数以外,还有另一个参数state(Vue组件中展示的数据源)。在这个过程中可以对数据进行判断,并作出相应的操作。

例子在src1/store.js中,这里是没有改写之前的代码

官方的文档中指出,vuex工作的各个过程是拆分开来实现的,下面我们就来进行一些分文件实现

项目的目录:

|--src文件夹
 

|--App.vue

|--main.js

|--store文件夹
 

|--index.js //必须有index.js,它是我们组装模块并导出 store 的地方
 

|--actions.js //是我们有动作触发之后,dispatch提交的地方
 

|--mutations.js //commit提交的地方
 

|--types.js //存放的是控制数据状态的地方,即控制数据如何变化
 

|--getters.js //获取数据的目前状态,给mutations使用

项目链接:https://github.com/yufann/vue.use-and-vuex

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 Javascript
详解AngularJS 模块化
Jun 14 #Javascript
JS判断时间段的实现代码
Jun 14 #Javascript
bootstrap选项卡扩展功能详解
Jun 14 #Javascript
zTree树形插件异步加载方法详解
Jun 14 #Javascript
详解Angular2响应式表单
Jun 14 #Javascript
vue过渡和animate.css结合使用详解
Jun 14 #Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Django values()和value_list()的使用
2020/03/31 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
成教自我鉴定
2013/10/27 职场文书
求职信模版
2013/11/30 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
出国签证在职证明
2014/01/16 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
教师聘用意向书
2015/05/11 职场文书
聘用合同范本
2015/09/21 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android