Vuex以及axios

Vuex簡介

vuex是一個專門爲Vue.js設計的集中式狀態管理架構。

狀態？ 咱們把它理解爲在data中須要共享給其餘組件使用的部分。

Vuex和單純的全局對象有如下不一樣：

一、Vuex 的狀態存儲是響應式的。當vue組件從store中讀取狀態的時候，

　　若store中的狀態發生變化，那麼相應的組件也會相應的獲得高效更新。

二、你不能直接改變store中的狀態。改變store中的狀態的惟一途徑就是顯示的

　　提交(commit)mutation。這樣使得咱們能夠方便的跟蹤每個狀態的變化，

　　從而讓咱們可以實現一些工具來幫助咱們更好的瞭解咱們的應用。

安裝使用vuex

　　--  npm install vuex

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

Vue.use(vuex)

Vue.config.productionTip = false

const store = new vuex.Store({
    state: {
      show: false,
    }
});

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

vuex的使用一

// 爲了方便維護，咱們一般把在src下面新建一個store文件夾，
// 而後在裏面新建一個index.js
import Vue from '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"

Vue.config.productionTip = false;

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

vuex的使用二

State

簡而言之~~state是保存咱們data中須要共享的數據。

因爲Vuex的存儲是響應式的，從store實例中讀取狀態的最簡單的方式就是在計算屬性中返回某個狀態。

this.$store.state.count

// 建立一個組件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count(){
      return this.$store.state.count
    }
  }
};

組件中獲取vuex中狀態

Getter

有時候咱們須要從store中的state中派生出一些狀態，例如對數據進行簡單的計算。

而且不少組件都須要用到此方法，咱們要麼複製這個函數，要麼抽取到一個公共函數，多處導入。

咱們vuex提供了更加方便的方法，getter ，它就像計算屬性同樣，getter的返回值會根據它的依賴被

緩存起來，只有它的依賴發生改變時，纔會從新計算。

Getter會接收state做爲其第一個參數：

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
    }
  },

});

Getter使用

Getter也能夠接收getters爲第二個參數：

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
    }
  },

});

Getter使用

Mutation

更改Vuex中的store中的狀態的惟一方法是提交mutation。

每一個mutation都有一個字符串的事件類型(type)，和一個回調函數handler。

也就是說咱們要觸發mutation中定義的方法(type)，而後纔會執行這個方法(handler)。

這個方法就是咱們更改狀態的地方，它會接收state爲第一個參數，後面接收其餘參數：

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基本使用

Mutation須要遵照Vue的響應規則

既然vuex中的store中的狀態是響應式的，那麼當咱們狀態變動時，監視狀態的vue組件也會更新。

這就意味着vuex中的mutation也須要與使用vue同樣遵照一些注意事項：

　　-- 1，最好提早在你的store中初始化好全部的所須要的屬性

　　-- 2，當對象須要添加屬性時，你應該使用

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

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

axios的簡單使用

基於Promise的HTTP請求客戶端，能夠同時在瀏覽器和node.js使用。

使用npm安裝axios

　　-- npm install axios -D

基本的配置

// main.js
import axios from "axios"

Vue.prototype.$axios = axios

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

axios的基本配置

基本的使用

test(){
          this.$axios.get(this.$store.state.apiList.course,{
            params: {
              id: 123,
            }
          }).then(function (response) {
            // 請求成功回調函數
          }).catch(function (response) {
            // 請求失敗的回調函數
          })
}

get請求

test(){
          this.$axios.post(this.$store.state.apiList.course,{
              course_title: "Python",
              course_price: "19.88"
          }).then(function (response) {
            // 請求成功回調函數
          }).catch(function (response) {
            // 請求失敗的回調函數
          })
}

post請求

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.request 本人喜歡的

 

跨域問題須要用插件解決