自定义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的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
vue中的使用token的方法示例
Mar 10 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP学习 运算符与运算符优先级
2008/06/15 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
初探nodeJS
2017/01/24 NodeJs
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
jQuery实现表格隔行换色
2018/09/01 jQuery
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
如何在Python中实现goto语句的方法
2019/05/18 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
python动态规划算法实例详解
2020/11/22 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
高中生操行评语大全
2014/04/25 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
毕业典礼主持词
2015/06/29 职场文书
2016党员党课心得体会
2016/01/07 职场文书
实验心得体会范文
2016/01/25 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript