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