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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM