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

parent.vue

多个组件之间共享数据

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: ""
})

// 各组件直接通过 `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

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