自定義vue全局組件use使用(解釋vue.use()的原理)

我們?cè)谇懊鎸W(xué)習(xí)到是用別人的組件：Vue.use(VueRouter)、Vue.use(Mint)等等。

其實(shí)使用的這些都是全局組件，這里我們就來(lái)講解一下怎么樣定義一個(gè)全局組件,并解釋vue.use()的原理

而我們?cè)儆肁xios做交互，則不能使用Vue.use(Axios)，因?yàn)锳xios沒(méi)有install自定義一個(gè)全局Loading組件，并使用：

總結(jié)目錄：

|-components
　　|-loading
　　　　|-index.js 導(dǎo)出組件，并且install
　　　　|-loading.vue 定義Loading組件，這里面基本的style ,script中之前講的methods,data方法都可以使用

index.js中的代碼：

import LoadingComponent from './loading.vue'
　　const Loading={
　　　　install:function(Vue){ //核心部分，在我們使用Vue.use()時(shí)，自動(dòng)調(diào)用的是install，而install導(dǎo)出的必須是的組件
 　　　　Vue.component('loading',LoadingComponent);
　　}
 };
export default Loading;

 main.js中要使用：

 　　import loading from './components/loading'
　　Vue.use(loading); //調(diào)用的是install里面的組件

 vuex的使用：

 官方文檔：http://vuex.vuejs.org

vuex：主要用來(lái)集中式管理組件狀態(tài)，（如組件顯示/隱藏，增加/減少）

1)啟動(dòng)一個(gè)項(xiàng)目

2)安裝vuex：cnpm install vuex -D

 3）vuex提供了兩個(gè)非常好的方法：

1. mapActions():可以將所有methods里面的方法，進(jìn)行打包。即對(duì)所有的事件(或我們的行為)進(jìn)行管理
2. mapGetters：獲取所有的數(shù)據(jù)，對(duì)所有的數(shù)據(jù)進(jìn)行管理

4）vuex的工作過(guò)程：

1.當(dāng)用戶點(diǎn)擊時(shí)，會(huì)調(diào)用increment函數(shù)(即用戶有一個(gè)動(dòng)作dispatch)mapActions將函數(shù)(動(dòng)作dispatch)提交到actions里面，并且傳了commit這個(gè)參數(shù)(也是一個(gè)函數(shù))

2.commit主要處理你要做什么，比如異步請(qǐng)求，判斷，流程控制等，commit會(huì)將這些請(qǐng)求、狀態(tài)提交到mutations里面

3.mutations主要用來(lái)處理狀態(tài)(數(shù)據(jù))的變化

4.mapGetters獲取目前數(shù)據(jù)，將狀態(tài)(數(shù)據(jù))提交到getters上面，給mutations使用，讓數(shù)據(jù)發(fā)生變化，并返回(render)，從而更新視圖

5）actions里面除了含有commit這的對(duì)象參數(shù)以外，還有另一個(gè)參數(shù)state(Vue組件中展示的數(shù)據(jù)源)。在這個(gè)過(guò)程中可以對(duì)數(shù)據(jù)進(jìn)行判斷，并作出相應(yīng)的操作。

例子在src1/store.js中，這里是沒(méi)有改寫之前的代碼

官方的文檔中指出，vuex工作的各個(gè)過(guò)程是拆分開(kāi)來(lái)實(shí)現(xiàn)的，下面我們就來(lái)進(jìn)行一些分文件實(shí)現(xiàn)

項(xiàng)目的目錄：

|--src文件夾
 　　|--App.vue
　　|--main.js
　　|--store文件夾
 　　　　|--index.js //必須有index.js，它是我們組裝模塊并導(dǎo)出 store 的地方
 　　　　|--actions.js //是我們有動(dòng)作觸發(fā)之后，dispatch提交的地方
 　　　　|--mutations.js //commit提交的地方
 　　　　|--types.js //存放的是控制數(shù)據(jù)狀態(tài)的地方，即控制數(shù)據(jù)如何變化
 　　　　|--getters.js //獲取數(shù)據(jù)的目前狀態(tài)，給mutations使用

項(xiàng)目鏈接：https://github.com/yufann/vue.use-and-vuex

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論