自定义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 常用方法经典总结
Jan 28 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
详解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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python多线程原理与用法详解
2018/08/20 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
python创建文本文件的简单方法
2020/08/30 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
高级工程师岗位职责
2013/12/15 职场文书
元旦促销方案
2014/03/15 职场文书
国庆宣传标语
2014/06/30 职场文书
个人欠条范本
2015/07/03 职场文书
厉行节约工作总结
2015/08/12 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
 Python 中 logging 模块使用详情
2022/03/03 Python