Vue 基础 - 请求发送与状态管理

https://cn.vuejs.org/

发送HTTP请求

axios是一个基于Promise、用于浏览器和Node.js Server的HTTP客户端：

1. 从浏览器中创建XMLHttpRequest
2. 从Node.js Server发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 防止CSRF/ XSRF

安装axios

npm install axios

导入并挂载到Vue原型中：

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

发送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社区官方的API为例
// 获取主题列表API：https://cnodejs.org/api/v1/topics
// 参数：page页码，limit 每页显示的数量

发送Post请求（有两种格式）：

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

在axios中，post请求接收的参数必须是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)
    })
}

状态管理

使用Vuex可实现状态管理（在各个组件之间管理外部状态），共享数据。

安装vuex：

cnpm install vuex

父子组件之间数据传递

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)    // 发生handle事件，向父组件发送消息
            }
        }
    }
</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>

多个组件之间共享数据

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

// 创建状态仓库，注意store、state不能修改
var store = new Vuex.Store({
    state: {    // 存放定义的状态
        name: ywh
    }
})

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

// 各组件直接通过this.$store.state.name拿到全局状态

vuex操作

vuex状态管理的流程：

1. view
2. actions
3. mutations
4. state
5. view

实现状态修改：

main.js

var store = new Vuex.Store({
    state: {    // 存放定义的状态
        name: ywh
    },
    mutations: {    // 改变状态
        reverse(state) {
            state.name.split("").reverse().join("")
        }
    },
    actions: {    // actions可以包含异步操作，mutation只能包含同步操作
        reverseAction(contenxt) {    // 传入上下文对象
            setTimeout(function () {
                context.commit("reverse");     // 只对mutation操作，不直接修改状态
            }, 1000)
        }
    },
    getters: {
        getName(state) {
            return state.name.length > 2 ? state.name : ""
        }
    }    // 定义getter方法，使外部获取状态不需要通过this.$store.state.name直接访问变量
    // this.$store.getters.getName
})

parent.vue

<button @click="reverse"></button>

// ...
methods: {
    reverse() {
        this.$store.commit('reverse')
        // this.$store.dispatch('reverse')    通过actions调用
    }
}