vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack項目實戰系列之二)

Vue有多優秀搭配全家桶做項目有多好之類的咱就不談了,直奔主題。

一、Vue

  系列一已經用vue-cli搭建了Vue項目,此處就不贅述了。

二、Vue-router

  Vue的路由,先獻上文檔(https://router.vuejs.org/zh-cn/)。

  路由在全家桶里面定位是什么呢,創建單頁應用!簡單!我們知道Vuejs是一系列的組件組成應用,既然是組件那么就需要組合起來,將組件(components)映射到路由(routes),然后告訴 vue-router 在哪里渲染它們!

  我們一般在APP.VUE文件里面使用router-view來告訴router在哪里渲染組件,如下圖(keep-alive被我注釋了后續系列繼續講):

  

  組件的配置:(此處有多個文件夾是便于管理大的項目,??榛?。對于小項目可以只要router下面的index.js就行)。

  至于路由配置中的resolve和require還有export default可以參考這篇文章(和Vue按需加載提升用戶體驗)

  

  路由按照上面的寫法就配置好了各個路由,那么在頁面之間需要路由跳轉怎么做呢$router.push()和$router.replace()就能做到了。

  

  路由嵌套:在子組件里面再增加一個router-view,然后配置成【路由嵌套在動畫的時候會有坑,后續更新】

  

  至此項目中用到的路由基本能搞定了。

 三、vuex狀態管理

  還是先獻上文檔(https://vuex.vuejs.org/zh-cn/

  Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。什么是狀態管理?可以簡單理解為管理數據流,多頁面共享一個data庫(全局)。

  什么時候用我就借用文檔語言了:

    

  說到vuex就肯定會有State、Actions、Mutations、Getters、Moudles

  (1)State

  Vuex 使用 單一狀態樹 —— State,用一個對象就包含了全部的應用層級狀態。就是放頁面共享數據的地方。(私有數據還是放自己.vue文件更好)

  (2)Actions  

  Action 類似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接變更狀態。

  • Action 可以包含任意異步操作。

  •   就是說異步方法放入Actions,如ajax請求,求情獲取到數據之后顯示提交mutation里面的方法來改變state。

      (3)Mutations

      更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。一條重要的原則就是要記住 mutation 必須是同步函數。組件中使用 this.$store.commit('xxx') 提交,在action里面使用commit('xxx') 提交。

      (4)Getters

      有時候我們需要從 store 中的 state 中派生出一些狀態,Vuex 允許我們在 store 中定義『getters』(可以認為是 store 的計算屬性)。Getters 接受 state 作為其第一個參數:

      

      Getters 會暴露為 store.getters 對象供調用。

      

      (5)Modules

      簡單點說就是為了方便操作和管理,??榛?。

      由于使用單一狀態樹,應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時,store 對象就有可能變得相當臃腫。

      為了解決以上問題,Vuex 允許我們將 store 分割成??椋╩odule)。每個??橛滌兇約旱?state、mutation、action、getter、甚至是嵌套子??欏由現料陸型絞降姆指?。

      最后上幾張圖方便查看具體寫法:

      

      

      

     

     四、axios

      就是封裝的ajax,可以根據自己的項目情況再進行封裝,然后action中調用。具體可以參考https://github.com/mzabriskie/axios

      

      結語:再接再厲!

     

    來源:itnose

上一篇: HTML5 History 模式

下一篇: canvas學習總結三:繪制虛線

分享到: 更多
时时彩官方开奖直播 全天北京pk赛车计划人工 看nba比赛投注量的网站 棋牌斗牛如何看牌抢庄 重庆时时彩专家杀号 北京pk10网赌害人案例 河南快三技巧规律 1亿守号中奖图片 北京pk10全天一期计划 重庆时时开奖最快直播 中彩网双色球开奖数据 挂机方案 稳赚不爆 大乐游戏mg游戏pt游戏sw游戏 老时时彩五星走势图 双面盘什么意思 三公玩法及规则