自定义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 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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/03/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python中的localtime()方法使用详解
2015/05/22 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
校园门卫岗位职责
2013/12/09 职场文书
志愿者服务感言
2014/02/27 职场文书
学习考察心得体会
2014/09/04 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android