Vue.js 建立一個 CNODE 社區(7)

vue-router / Axios / vuex

學習 vue.js 中的 vue-router / axios / vuex。

demo：

代碼連接：GitHub

預覽連接：Git Pages

---

vue-router

vue-router 官方文檔

實現：當用戶輸入不一樣的 url 時，切換/跳轉不一樣的組件。

vue-router 基本加載

• 安裝

在項目中運行 cnpm install --save vue-router

• 引用

在項目的入口文件(能夠在 /build/webpack.base.config.js 中查看，即 entry 中的文件)中引用：

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

• 配置路由文件，並在vue實例中注入

// 配置路由文件
let rt = new router(

    //請注意這裏，是 routes ,不是 router，更不是 routers！
    routes:[
        {
            path:'/hello',
            component:HelloWorld
        }
    ]
})

// 在 vue 實例中注入
var app = new Vue({
    el:'#app',
    router:rt
})

• 肯定視圖加載的位置

<router-view></router-view>

---

vue-router 路由跳轉

可是，若是要用戶本身輸入 url 進行切換是不現實的，因此:

1.咱們建立了一個組件A(新建 .vue 文件)，裏面包含了兩個按鈕，而後輸出(export)；

2.先把組件A 引入(import)並掛載到 vue 實例上，而後在頁面中渲染出來；

3.再新建兩個組件 B1 和 B2 ，都在負責 router 的 index.js 中引入、配置路由文件、輸出(export)、並在 vue 實例中注入；

// index.js
export default new router({
    // 請注意這裏，是 routes ,不是 router，更不是 routers！
    routes:[
        {
            path:'/world',
            component:HelloWorld
        },
        {
            path:'/earth',
            component:HelloEarth
        }
    ]
})

// main.js
import rt from './router/index'
new Vue({
    ...
    router:rt
    ...
})

4.肯定視圖加載的位置：

<router-view></router-view>

5.在組件A 的兩個按鈕中分別添加 router-link，實現跳轉：

<ul>
    <li><h3><router-link to='/world'>To World</router-link></h3></li>
    <li><h3><router-link to='/earth'>To Earth</router-link></h3> </li>
</ul>

這其中 router-link 和配置 routes 是很重要的。

---

經過路由傳遞參數

1.必須在路由內加入路由的name

2.必須在path後加/: +傳遞的參數

// index.js
export default new router({
    // 請注意這裏，是 routes ,不是 router，更不是 routers！
    routes:[
        {
            name:'world',
            path:'/world/:myMsg',
            component:HelloWorld
        },
        {
            name:'earth',
            path:'/earth/:myMsg',
            component:HelloEarth
        }
    ]
})

3.在 router-link 添加參數

<ul>
    <li><h3><router-link :to='{name:"world",params:{myMsg:"你好世界"}}'>To World</router-link></h3></li>
    <li><h3><router-link :to='{name:"earth",params:{myMsg:"你好地球"}}'>To Earth</router-link></h3> </li>
</ul>

<!-- 或者能夠直接這樣 -->
<ul>
    <li><h3><router-link :to='{path:"/world",query:{myMsg:"你好世界"}}'>To World</router-link></h3></li>
    <li><h3><router-link :to='{path:"/earth",query:{myMsg:"你好地球"}}'>To Earth</router-link></h3> </li>
</ul>

4.讀取參數

只有在指定的組件內纔可使用：

{{ $route.params.myMsg}}

這樣頁面渲染的時候就能夠拿到 router-link 中傳遞的參數了。

---

Axios

Axios 官方文檔

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF

使用 axios

• 安裝

運行 cnpm install axios

• 引入

import axios from 'axios'

• 將axios全局掛載到 VUE 原型上

Vue.prototype.$http = axios

• axios 中的 GET

<button @click='getData'>GET 請求</button>
<ul>
    <li v-for='item in items'>{{item.title}}</li>
</ul>

data () {
    return {
      items:[]
    }
  },
  methods:{
    getData:function(){
      // .then 不用箭頭函數的話，也能夠聲明 let self = this，而後賦值給 self.items
      this.$http.get('https://cnodejs.org/api/v1/topics',{

        // 傳入參數
        params:{
            page:1,
            limit:10
        }
      })
        .then((response)=>{
          this.items = response.data.data
        })
        .catch((err)=>{
          console.log(err)
        })
    }
  }

點擊按鈕後，咱們向 https://cnodejs.org/api/v1/topics 發送請求，將獲取的數據賦值給 data 中的 items，而後在頁面中經過 v-for 遍歷 items，將數據渲染出來。

• axios 中的 POST

POST傳遞數據有兩種格式：

form­-data ?page=1&limit=48

x­-www-­form-­urlencoded { page: 1,limit: 10 }

在axios中，post請求接收的參數必須是form-­data，因此要使用 qs 庫對 post 的數據進行處理。

關於 axios 中的 post ，詳情能夠參考這篇博文。

由於params是添加到url的請求字符串中的，用於get請求；而data是添加到請求體（body）中的， 用於post請求。

<button @click='postData'>GET 請求</button>

import qs from 'qs'
methods:{
    postData:function(){
        this.$http.post(url,qs.stringify({
                page:1,
                limit:10
            })
        )
        .then((data)=>{
            console.log(data)
        })
        .catch((err)=>{
            console.log(err)
        })
    }
}

---

vuex

vuex 官方文檔

Vuex 是什麼：

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

什麼狀況下須要用到 Vuex：

若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。可是，若是您須要構建一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

• 基本用法

第一步：引入vuex，並經過use方法使用它

運行 cnpm i vuex 安裝 Vuex

import Vuex from 'vuex'

Vue.use(Vuex)

第二步： 建立狀態倉庫

let store = new.Vuex.Store({
    state{
        xxx:XXX
    }
})

第三步：經過 this.$store.state.xxx 直接拿到須要的數據

• 核心用法

vuex狀態管理的流程

view ——­> actions —–> mutations —–> state ——­> view

用 Vue 官方文檔的一張圖表示就是：

let store = new Vuex.Store({
  
  // 建立全局狀態，經過 this.$store.state.num 調用
  state:{
    num:666
  },

  // 改變全局狀態，經過 this.$store.commit('increase') 調用
  mutations:{
    increase(state){
      state.num = state.num + 20
    },
    decrease(state){
      state.num = state.num - 20
    }
  },

  // 提交的是 mutation ，而不是直接變動狀態，可是能夠執行異步操做，且傳入的參數也不一樣，經過 this.$store.dispatch('addAction') 調用
  actions:{
    addAction(context){
      setTimeout(()=>{
        context.commit('increase')
      },2000)
    },
    decreaseAction(context){
      setTimeout(()=>{
        context.commit('decrease')
      },2000)
    }
  },

  // 至關於獲取狀態的過濾器，經過 this.$store.getters.getNum 獲取全局狀態
  getters:{
    getNum(state){
      return state.num>0?state.num:0
    }
  }
})

actions 和 mutation 的區別：

actions 提交的是 mutation,而不是直接變動狀態

actions 能夠包含異步操做，可是 mutation 只能包含同步操做