自定义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中的new的使用方法与注意事项
May 16 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
vue文件运行的方法教学
Feb 12 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
JS实现打字游戏
Dec 17 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
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
2015年个人思想总结
2015/03/09 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书