自定义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提供了两个非常好的方法:
  mapActions():可以将所有methods里面的方法,进行打包。即对所有的事件(或我们的行为)进行管理
  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使用

自定义vue全局组件use使用、vuex的使用的更多相关文章

  1. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  2. 自定义vue全局组件use使用

    自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...

  3. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  4. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

  5. 自定义Vue&Element组件,实现用户选择和显示

    在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...

  6. vue插件 使用use注册Vue全局组件和全局指令

    插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...

  7. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  8. vue 全局组件【原】

    1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...

  9. vue 全局组件的注册

    第一步 在main.js里面 引入需要注册的组件例如: //引入组件 import header from  './components/header.vue' import footer from ...

随机推荐

  1. Facebook巴特尔与谷歌移动广告 急于打开中国市场

    随着Facebook(62.5, -0.69, -1.09%)即将设立了销售办事处在北京发酵消息.谷歌(556.33, 2.43, 0.44%)似还差点自觉保护国内市场. 6月5日,谷歌在深圳举行了面 ...

  2. 三星260亿美元的豪赌:想垄断DRAM和NAND闪存市场(规模经济让对手难以招架)

    腾讯科技讯 据外媒报道,经过50年的发展,半导体市场仍然显得非常活跃,它在今年有望增长20%.随着高增长而来的是供应短缺,这就是DRAM和闪存价格为什么今年会上涨的原因. 三星在DRAM和闪存市场占有 ...

  3. Tagging Physical Resources in a Cloud Computing Environment

    A cloud system may create physical resource tags to store relationships between cloud computing offe ...

  4. thread、Task、async & await

    学习 Jesse 的文章 async & await 的前世今生(Updated) 而来 Thread是最开始使用的多线程.new一个Thread对象,将方法传进去.手动Start() 还可以 ...

  5. 认识ADO.net

    这篇文章源自对刘皓的文章的学习 ADO.NET入门教程(一) 初识ADO.NET 这篇文章非常好,用一张图,以及对图的解释介绍了ado.net组件 ado.net内部主要有两个部分 dataProvi ...

  6. Cocos2d-x3.1下实现相似iOS页面滑动指示圆点

    原文地址:http://blog.csdn.net/qqmcy/article/details/37612457 代码下载:http://download.csdn.net/detail/qqmcy/ ...

  7. WinEdt && LaTex(四)—— 自定义新命令(newcommand、def)

    1. 新建命令 使用如下的命令:\newcommand{name}[num]{definition}: 该命令(newcommand)有两个参数,第一个 name 是你想要建立的命令的名称,第二个def ...

  8. eclipse 配置maven tomcat 环境

    一  maven配置文件路径 二  tomcat 和JRE位置 三 validation 设置 四 五 六 设置run(debug) configurations 七 添加server时添加 reso ...

  9. Servlet的基础知识

    没有什么固定的结构, 就是稍微总结一下学习到的, 基本上想到哪里写到哪里. 关于基本的最HttpServlet 实际上Servlet是J2EE(也就是现在的Java EE)中规范的一个接口, 用于根据 ...

  10. VisualSVN-6.0.1Patch just for VS2017补丁原创发布

    VisualSVN-6.0.1Patch_justforVS2017补丁原创发布 一切尽在发布中.