自定义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中清空数组的三种方法分享
Apr 07 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
js实现分割上传大文件
Mar 09 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 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
php二分法在IP地址查询中的应用
2008/08/12 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python字典多条件排序方法实例
2014/06/30 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
西北政法大学自主招生自荐信
2014/01/29 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
空乘英文求职信
2014/04/13 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python