Vuex以及axios 看這個 Vuex以及axios
-- 安裝
npm i vuex
-- 配置
-- 匯入vuex
import vuex from "vuex"
-- vue使用vuex
vue.use(vuex)
-- 例項化倉庫
new vuex.Store({
state: {},
getters: {},
mutations: {}
})
-- new Vue({
el: "#app",
store,
})
-- 獲取倉庫資料
this.$store.state.xxx
this.$store.getters.xxx
-- 改變倉庫中的資料
-- 元件向倉庫提交修改事件
this.$store.commit("事件名稱", data)
--在倉庫的mutations中
mutations: {
"事件名稱"： function(state, data){
修改state中的資料
}
}
-- 注意計算屬性
倉庫中的資料建議都放在計算屬性中
axios
-- 實現ajax技術的工具
-- 配置
-- 下載
npm i axios
-- 匯入
import axios from "axios"
-- 在vue的原型鏈中加入方法
Vue.prototype.$axios = axios
-- 傳送請求
this.$axios.request({url，method}).then(function(){}).catch(function(){})
前後端的接通
-- 後端設計一個介面
-- 前端通過axios傳送請求拿到資料
-- 跨域問題(只在測試用)
from django.utils.deprecation import MiddlewareMixin
class MyCors(MiddlewareMixin):
def process_response(self, request, response):
response["Access-Control-Allow-Origin"] = "*"
return response
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/>'
});
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)
})
}
},
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/>'
});
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)
})
}
},