vue-router和vuex的學習總結


一、vue-router——路由管理

 經過自己的學習加項目總結,針對路由這塊內容說下自己的理解:

路由配置主要有三個關鍵字:route routes router

route(單數)表示一條路由,它是一個對象由兩部分構成(path——路徑;component——組件)

例如:homeBtn——homeContent(點擊homeBtn按鈕頁面切換到homeContent組件);sideBtn——sideContent;這是兩條路由(route)

如果路由多,這樣一條一條表示顯然不合理。

由此出現routes(復數)表示一組路由(路由的數組),上面的兩條路由就可以這樣表示:

 

具體寫法:const routes = [{path:'/home',component:homeContent},{path:'/sidebar',component:sidebarContent}]

 router表示路由機制(即路由的管理者),實現原理:點擊homeBtn按鈕——到routes里去查找到‘/home’對應得組件homeContent,並顯示頁面。

寫法:const router = new VueRouter({routes:routes}),簡寫:const router = new VueRouter({routes})

最后將router實例注入到vue根實例中,便可以使用路由

import Router from 'vue-router'
Vue.use(Router)

配置好路由再定義好路由的出口router-view就可以使用路由實現頁面跳轉了。

ps:router-link相當於a標簽。

二、vuex——數據狀態管理

簡單說下vuex的作用:主要用於組件直接通訊。比如A和B和C為兄弟組件,組件中都用到name這個字段,A組件中如果對name字段進行更改,那該如何通知B和C組件name字段已經發生變化了呢?這個時候就可以使用Vuex來進行通訊了。先將name存起來(state管理變量初始狀態的),A組件中通過觸發mutation來通知state中的name發生改變。那么B和C組件就可以從vuex獲取state中的name。大概就是這么個意思。

另外說一下:vuex中的幾個關鍵要素:state、mutation、action以及vuex中自帶的函數:mapState、mapMutation、mapAction、mapGetter(都是個人的理解,如有不當請指出。)

state主要定義一些初始化的變量;

mutation定義修改State的方法,有兩個參數(state、value)

action定義觸發mutation行為的方法;語法:方法名(context)、通過context.commit來觸發mutation的方法;

getter定義獲取state的方法,參數state;

上面內容主要說如何定義這些變量,下面說下如果在組件中使用這些方法:

第一種情況:設置/修改變量的兩種方式:

a、在計算屬性中或方法中調用mutation方法:this.$store.commit(‘方法名’,參數值)

b、使用action觸發mutation方法:this.$store.dispatch(mutaion的方法)

官方不建議使用a,建議使用b。

第二種情況:獲取參數

兩種方式:1、this.$store.state.參數;2、this.$store.getter.方法名

 使用this.$store.state等這些書寫方式太長。所以可以通過vuex的輔助函數:mapState等來簡化書寫

輔助函數的使用方法:

1、mapGetters/apState放在computed屬性中。

書寫方式:a、...mapGetters(['Getter定義的方法名'])

                 b、參數如果是count:...mapState({state=>state.count})

2、mapMutation和mapAction,一般放在method中寫:...mapMutation(['mutation定義的方法名'])

有錯誤歡迎指正!


免責聲明!

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



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