RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
自定义vue全局组件use、vuex怎么用-创新互联

这篇文章主要介绍了自定义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提供了两个非常好的方法:

  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使用

感谢你能够认真阅读完这篇文章,希望小编分享的“自定义vue全局组件use、vuex怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站建设公司行业资讯频道,更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:自定义vue全局组件use、vuex怎么用-创新互联
本文地址:http://lswzjz.com/article/pjeeh.html