自定义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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # 全局组件  # 自定义全局组件  # vue2  # Vue组件之全局组件与局部组件的使用详解  # vue2.0全局组件之pdf详解  # 详解Vue.use自定义自己的全局组件  # Vue.js上下滚动加载组件的实例代码  # 详解vue项目优化之按需加载组件-使用webpack require.ensure  # vue组件（全局  # 局部  # 动态加载组件）  # 的是  # 自定义  # 就来  # 文档  # 在这个  # 你要  # 做什么  # 它是  # 非常好  # 可以使用  # 再用  # 这些都是  # 在前面  # 会将  # 这里面  # 传了  # 中要  # 大家多多  # 过程中  # 有一个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  怎么用AI帮你为初创公司进行市场定位分析？  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  如何在七牛云存储上搭建网站并设置自定义域名？  如何续费美橙建站之星域名及服务？  Python自动化办公教程_ExcelWordPDF批量处理案例  Python正则表达式进阶教程_复杂匹配与分组替换解析  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Swift开发中switch语句值绑定模式  如何快速搭建虚拟主机网站？新手必看指南  浅述节点的创建及常见功能的实现  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  Laravel如何配置Horizon来管理队列？（安装和使用）  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Linux系统运维自动化项目教程_Ansible批量管理实战  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  简单实现jsp分页  香港服务器建站指南：免备案优势与SEO优化技巧全解析  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  如何在云指建站中生成FTP站点？  如何在Ubuntu系统下快速搭建WordPress个人网站？  如何彻底删除建站之星生成的Banner？  iOS正则表达式验证手机号、邮箱、身份证号等  如何登录建站主机？访问步骤全解析  昵图网官网入口 昵图网素材平台官方入口  Linux网络带宽限制_tc配置实践解析【教程】  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  Laravel如何使用Telescope进行调试？（安装和使用教程）  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  魔毅自助建站系统：模板定制与SEO优化一键生成指南  C++时间戳转换成日期时间的步骤和示例代码  深圳网站制作培训,深圳哪些招聘网站比较好？  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  Laravel如何处理表单验证？（Requests代码示例）  微信h5制作网站有哪些,免费微信H5页面制作工具？  高端企业智能建站程序：SEO优化与响应式模板定制开发  Laravel如何创建自定义Artisan命令？（代码示例）  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  jQuery中的100个技巧汇总  Laravel如何使用withoutEvents方法临时禁用模型事件  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  制作旅游网站html,怎样注册旅游网站？