Vuex以及axios 看這個
Vuex簡介
vuex是一個專門為Vue.js設計的集中式狀態管理架構。
狀態? 我們把它理解為在data中需要共享給其他組件使用的部分。
Vuex和單純的全局對象有以下不同:
1、Vuex 的狀態存儲是響應式的。當vue組件從store中讀取狀態的時候,
若store中的狀態發生變化,那麽相應的組件也會相應的得到高效更新。
2、你不能直接改變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/>‘ });
// 為了方便維護,我們通常把在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實例中讀取狀態的最簡單的方式就是在計算屬性中返回某個狀態。
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) }) } },
Vuex以及axios 看這個