自定义vue全局组件use使用、vuex的使用
自定义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的使用的更多相关文章
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- 自定义vue全局组件use使用
自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- Vue全局组件注册
通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...
- 自定义Vue&Element组件,实现用户选择和显示
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...
- vue插件 使用use注册Vue全局组件和全局指令
插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...
- vue全局组件-父子组件传值
全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...
- vue 全局组件【原】
1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...
- vue 全局组件的注册
第一步 在main.js里面 引入需要注册的组件例如: //引入组件 import header from './components/header.vue' import footer from ...
随机推荐
- Android子线程中更新UI的4种方法
方法一:用Handler 1.主线程中定义Handler: Handler mHandler = new Handler() { @Override public void handleMessage ...
- VSCode 小鸡汤 第00期 —— 安装和入门
简介 这将是一个新的系列,将会以 Visual Studio Code(后文都简称为 VSCode 啦)的操作,环境配置,插件介绍为主,为大家不定期的介绍 VSCode 的一些操作技巧,所以取名 VS ...
- Swift类和结构
类和结构有非常多的共同点: 定义属性存储数据 定义方法执行功能处理 定义下标,通过下标訪问他们的值 初始化他们的状态 通过扩展(Extension)扩展其功能 遵守协议(Protocol).协议提供一 ...
- cocos2d-x 源代码分析 总文件夹
这篇博客用来整理与cocos2d-x相关的工作,仅仅要有新的分析.扩展或者改动,都会更改此文章. 祝大家愉快~ 1.源代码分析 1.CCScrollView源代码分析 http://blog.csdn ...
- 《菊与刀》original 的阅读
0. 词汇 foe:敌人,反对者,危害物: rigid:严格的,僵硬的,死板的, they are incomparably rigid in their behavior, innovation:革 ...
- ASP.NET Core 路由 - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core 路由 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 路由 前两章节中,我们提到 ASP.NET Core 支持 MVC 开发 ...
- Select2使用方法汇总
引用: <script src="~/Content/plugins/select2/select2.min.js"></script> 1.简单使用 $. ...
- Rust 2017 调查报告:学习曲线是最大痛点(最大的问题是这门语言太偏底层了,现在做底层的少了。还有C这个绕不过去的存在)
Rust 官方在社区上做了一次调查,以了解用户如何看待 Rust 的发展.调查共收到 5368 份回复,其中有 大约 2/3 的是 Rust 用户,剩下的 1/3 是非 Rust 用户,调查结果如下. ...
- getResources()方法
今天做一个Android文件管理器.它使用了很多当地的用途getResources. Drawable currentIcon = null; ------ current ...
- Matlab随笔之三维图形绘制
1.三维曲线 用到了plot3函数.plot3(x,y,z)用来绘制3维曲线图,而不能绘制曲面图!就是把所有的(x,y,z)点连接在一起. t=linspace(,*pi,); x=sin(t); y ...