Vue 基礎 - 請求發(fā)送與狀態(tài)管理

https://cn.vuejs.org/

發(fā)送 HTTP 請求

axios 是一個基于 Promise钮莲、用于瀏覽器和 Node.js Server 的HTTP客戶端：

從瀏覽器中創(chuàng)建 XMLHttpRequest
從 Node.js Server 發(fā)出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數(shù)據(jù)
取消請求
自動轉換JSON數(shù)據(jù)
防止CSRF/ XSRF

安裝 axios

npm install axios

導入并掛載到 Vue 原型中：

import axios from 'axios'
Vue.prototype.$http = axios;

發(fā)送 Get 請求：

getData(){
    var self = this;
    this.$http.get('https://cnodejs.org/api/v1/topics')
    .then(function (res) {
        // 此處的this指向的不是當前vue實例
        self.items = res.data.data
    })
    .catch(function (err) {
        console.log(err)
    })
}

axios.get('/user', 
    {params: {ID: 12345}}
)
axios.get('/user', {
    ID: 12345
})
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
// 以CNODE社區(qū)官方的API為例
// 獲取主題列表API：https://cnodejs.org/api/v1/topics
// 參數(shù)：page頁碼，limit 每頁顯示的數(shù)量

發(fā)送 Post 請求（有兩種格式）：

form--data：?page=1&limit=48
x--www--form--urlencoded：{page: 1, limit: 10}

在 axios 中宴杀，Post 請求接收的參數(shù)必須是 form--data汰蓉，因此需要安裝 qs 插件

cnpm install qs

postData(){
    var self = this;
    this.$http.post(url, qs.stringify({
        page:1,
        limit:10
    }))
    .then(function (res) {
    self.items = res.data.data
    })
    .catch(function (err) {
        console.log(err)
    })
}

狀態(tài)管理

使用 vuex 可實現(xiàn)狀態(tài)管理（在各個組件之間管理外部狀態(tài)），共享數(shù)據(jù)。

安裝 vuex：

cnpm install vuex

父子組件之間數(shù)據(jù)傳遞

child.vue

<template>
    <div>
        <span>子組件</span>：{{fromParentMsg}}
        <button @click="sendMsgToParent">向父組件傳遞消息</button>
    </div>
</template>
<script>
    export default {
        name: "child",
        props: {
            fromParentMsg: {
                type: String, default: ""
            }
        },
        data: function() {
            return {toParentMsg: "子組件向父組件傳遞消息"}
        }
        methods: {
            sendMsgToParent: function () {
                this.$emit('handle', this.toParentMsg)    // 發(fā)生handle事件坡倔，向父組件發(fā)送消息
            }
        }
    }
</script>

parent.vue

<template>
    <div>
        <span>父組件</span>：{{fromChildMsg}}
        <hr>
        <child :fromParentMsg="toChildMsg" @handle="getMsgFromChild"></child>
    </div>
</template>

<script>
import child from './child'    // 在父組件中引入子組件

export default {
    name: "parent",
    data: function() {
        return {toChildMsg: "父組件向子組件傳遞消息", fromChildMsg: ""}
    },
    components: {child},
    methods: {
        getMsgFromChild: function(value) {
            this.fromChildMsg = value
        }
    }
}
</script>

多個組件之間共享數(shù)據(jù)

import Vuex from 'vuex'
Vue.use(Vuex)

// 創(chuàng)建狀態(tài)倉庫，注意store脖含、state不能修改
var store = new Vuex.Store({
    state: {    // 存放定義的狀態(tài)
        name: ywh
    }
})

new Vue({
    el: "#app",
    router,
    store,
    components: {APP},
    template: "<App/>"
})

// 各組件直接通過 `this.$store.state.name` 拿到全局狀態(tài)

vuex 操作

vuex 狀態(tài)管理的流程：

view
actions
mutations
state
view

實現(xiàn)狀態(tài)修改：

main.js

var store = new Vuex.Store({
    state: {    // 存放定義的狀態(tài)
        name: ywh
    },
    mutations: {    // 改變狀態(tài)
        reverse(state) {
            state.name.split("").reverse().join("")
        }
    },
    actions: {    // actions可以包含異步操作罪塔，mutation只能包含同步操作
        reverseAction(contenxt) {    // 傳入上下文對象
            setTimeout(function () {
                context.commit("reverse");     // 只對mutation操作，不直接修改狀態(tài)
            }, 1000)
        }
    },
    getters: {
        getName(state) {
            return state.name.length > 2 ? state.name : ""
        }
    }    // 定義getter方法养葵，使外部獲取狀態(tài)不需要通過this.$store.state.name直接訪問變量
    // this.$store.getters.getName
})