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