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

项目链接:https://github.com/yufann/vue.use-and-vuex

时间: 2024-12-15 06:54:38

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

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

这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' im

vue-cli -- 自定义配置全局组件

一.全局配置 1.创建公共组件 在components文件夹load中新建loading.vue和loading.js两个文件,vue文件用来写公共组件,js用来导出这个组件 2.导出公共组件 在loading.js中,规定了使用这个组件的名字,以及使用方法 import Loading from './loading.vue' const loading={ install:function(Vue){ // Vue.component()是用来注册全局组件的 Vue.component('l

Vue:全局组件与局部组件

全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="seg1"> <alert></alert> </div> <script

vue全局组件和局部组件

1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注册的组件可以在全局任何一个地方的template里面使用 2.局部组件 //组件a export default{ template:'<div><name></name></div>', data(){ retrun {} }, components:{ 'n

两步创建vue全局组件

import Login from './Login' export default { install: function(Vue){ Vue.component('Login', Login); } } // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import

自定义 vue switch 组件

1 <template> 2 <div class="switch clearfix" 3 @click="toggle" 4 v-bind:style="{ background: activeState ? activeColor : inActiveColor }"> 5 <div v-show="activeState" class="switch-text switch-on&

vue中组件的四种方法总结

希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: 第一步:实例化Vue对象 var app = new Vue({ el:"#app" })     第二步:定义组件 var myComponent = Vue.extend({ template: '<h1>vue全局组件写法一</h1>' });     第三步

Vue 使用use、prototype自定义自己的全局组件

使用Vue.use()写一个自己的全局组件. 目录如下: 然后在Loading.vue里面定义自己的组件模板 <template> <div v-if="loadFlag"> Loading... </div> </template> <script> export default { name: "MyLoading",//组件名称 props: ['loadFlag'], } </script&g