Vuex以及axios

Vuex简介

vuex是一个专门为vue.js设计的集中式状态管理架构。

状态： 我们把它理解为在data中需要共享给其他组件使用的部分。

Vuex和单纯的全局对象有以下不同：

　　1，Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，

　　　　若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。

　　2，我们不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的提交

　　　（commit）mutation。这样使得我们可以方便的跟踪每一个状态的变化，

　　　　从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。

安装使用vuex

　　npm i vuex

　　vuex的使用一

// main.js
import Vue from 'vue'
import App from 'App'
import router from 'router'
import vuex from 'vuex'

// 使用vuex
Vue.use(vuex)


// 实例化仓库store
const store = new vuex.Store({
    state: {
        show: false,
    },
    getattrs: {
    },
    mutations: {},
});

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

　　vuex的使用二 

// 为了方便维护，我们通常把在src下面新建一个store文件夹，
// 然后在里面新建一个index.js

import Vue from 'vue'  // Vue是自定义的名称
import Vue_x from 'vuex'

Vue.use(Vue_x);

export default new Vue_x.Store({
    state: {
        show: false,
    },
});

// 那么main.js要改成
import Vue from 'vue'
import App from 'App'
import router from 'router'
import store from 'store'

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

State

state是保存我们data中需要共享的数据。

由于Vuex的存储是响应式的，从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。

Getter

getter它就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，只有它的依赖发生改变时，才会重新计算。

获取仓库store中的数据

　　this.$store.state.xxxx  

　　this.$store.getters.xxxx

import Vue from 'vue'
import Vue_x from 'vuex'

Vue.use(Vue_x);


export default new Vue_x.Store({
    state: {
        count: 20,
    },
    // 通过this.$store.getters.my_func
    getters: {
        my_func: function(state) {
            return state.count * 2
        },

        // 通过this.$store.getters.my_func_count
        my_func_count: function(state,getters){
            return getters.my_func.length
        }
    },
});

Mutation

更改Vuex中的store中的状态的唯一方法是提交mutation。

每个mutation都有一个字符串的事件类型（type），和一个回调函数handler。

也就是说我们要触发mutation中定义的方法（type），然后才会执行这个方法（handler）。

import Vue from 'vue'
import Vue_x from 'vuex'

Vue.use(Vue_x);


export default new Vue_x.Store({
    state: {
        count: 20,
    },
    // 需要通过this.$store.commit('increment', 10)
    mutations: {
        increment (state, n) {
            // 变更状态
            state.count += n
        }
    }
});

　　Mutation需要遵守Vue的响应规则

　　既然vuex中的store中的状态是响应式的，那么当我们状态变更时，监听状态的vue组件也会更新。

　　这就意味着vue中的mutation也需要与使用vue一样遵守一些注意事项：

　　　　1，最好提前在你的store中初始化好所有的所需要的属性

　　　　2，当对象需要添加属性时，你应该使用

　　　　　　Vue.set(obj, 'newProp',123)

　　　　　　以新对象代替老对象  state.obj = { ...state.obj,newProp:123 }

　　改变仓库中的数据

　　　　-- 组件向仓库提交修改事件

　　　　　　this.$store.commit('事件名称',data)

　　　　-- 在仓库的mutations中

　　　　　　mutations: {

　　　　　　　　'事件名称': function (state, data) {

　　　　　　　　　　修改state中的数据

　　　　　　　　}

　　　　　　}

　　-- 注意计算属性

　　　　仓库中数据建议都放在计算属性中

axios的简单使用

基于promise的HTTP请求客户端，可以同时在浏览器和node.js使用。

使用npm安装axios

　　npm i axios -D

基本的配置

实现ajax技术的工具

// main.js
import axios from 'axios'

// 在vue的原型链中加入方法
Vue.prototype.$axios = axios

// 组件中
methods: {
    init() {
        this.$axios({
            method: 'get',
            url: 'user',
        })
    },
};　　

基本使用

　　get请求

test() {
    this.$axios.get(this.$store.state.apiList.course,{
        params: {
            id : 123,
        }
    }).then(function(response){
        // 请求成功回调函数
    }).catch(function(response){
        // 请求失败的回调函数
    })
}

　　post请求

test() {
    this.$axios.post(this.$store.state.apiList.course,{
        params: {
            id : 123,
        }
    }).then(function(response){
        // 请求成功回调函数
    }).catch(function(response){
        // 请求失败的回调函数
    })
}

　　发送多个请求

function getCourse(){
          return this.$axios.get('/course/12')
        }
function getCourse_all() {
          return this.$axios.get('/course')
        }
this.$axios.all([getCourse_all(),getCourse()])
          .then().catch()

　　清晰版

methods: {
          init(){
            var that = this
            this.$axios.request({
              url: that.$store.state.apiList.course,
              method: 'get'
            }).then(function (data) {
              if (data.status === 200){
                  that.courseList = data.data
              }
            }).catch(function (reason) {
              console.log(reason)
            })
          }
},

　　前后端的接通

　　　　后端设计一个接口

　　　　前端通过axios发送请求拿到数据

　　　　跨域问题

转载于:https://www.cnblogs.com/wjs521/p/9964142.html