Vue之vuex和axios

Vuex :

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

狀態: 可以理解為在data中需要共享給其他組件使用的部分.

Vuex和單純的全局對象的不同:

　　1. Vuex的狀態存儲是響應式的.

　　　 當vue組件從store中讀取狀態的時候, 若store中的狀態發生改變, 那么相應的組件也會得到高效更新.

　　2. store中的狀態不能直接進行改變, 改變store中的狀態的唯一途徑就是顯示的提交(commit)mutation. 這樣使得我們可以方便的跟蹤每一個狀態的變化, 從而讓我們能夠實現一些工具來幫助我們更好的了解我們的應用.

注意事項 :

　　倉庫中的數據建議都放在計算屬性下

 

---

 

安裝使用Vuex:

安裝: 

　　npm install vuex

配置:

　　導入vuex: import vuex from "vuex"

　　使用vuex: vue.use(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/>'
});

// 為了方便維護，我們通常把在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/>'
});

 

---

 

State:

簡而言之, state是保存我們data中需要共享的數據的

由於Vuex的存儲是響應式的, 從store實例中讀取狀態的最簡單的方式就是在計算屬性中返回某個狀態.

實例化倉庫:

new vuex.Store({
    state: {},      //共享的數據
    gettres:{},    //可以進行二次加工
    mutations:{}    //更改vuex中的store的狀態的方法
})

在Vue實例對象中注冊:

new Vue({
    el: "#app",
    store,
})

獲取倉庫中的數據:

　　this.$store.state.xxx

　　this.$store.getters.xxx

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

 

---

 

Getter:

有時候需要從store中的state中派生出一些狀態, 例如對數據進行簡單的計算.

並且很多組件都需要用到此方法, 我們要么復制這個函數, 要么抽取到一個公共函數, 多處導入.

vuex提供了更加方便的方法, getter, 它就像計算屬性一樣, getter的返回值會根據它的依賴被緩存起來, 只有他的依賴發生改變時, 才會重新計算.

Getter會接受start作為其第一個參數:

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作為其第二個參數:

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都有一個字符串的事件類型, 和一個回調函數handler.

也就是說要觸發mutation中定義的方法, 然后才會執行這個方法(handler).

這個方法就是更改狀態的方法, 他會接受state為第一個參數, 后面接收其他參數.

Mutation的基本使用:

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組件也會更新.

　　這就意味着vuex中的mutation也需要與使用vue一樣遵守一些注意事項:

　　　　1. 最好提前在你的store中初始化好所需要的屬性

　　　　2. 當對象需要添加屬性時, , 應該使用:

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

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

 

---

 

axios的簡單使用:

基於Promise的HTTP請求客戶端, 可以同時在瀏覽器和node.js使用.

實現ajax技術的工具

安裝:

　　npm install axios

配置:

　　導入: import axios from "axios"

　　在vue原型鏈中加入方法: vue.prototype.$axios = axios

// main.js
import axios from "axios"

Vue.prototype.$axios = axios

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

基本使用:

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