Vuex以及axios
Vuex简介
vuex是一个专门为vue.js设计的集中式状态管理架构。
状态： 我们把它理解为在data中需要共享给其他组件使用的部分。
Vuex和单纯的全局对象有以下不同：
1，Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，
若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。
2，我们不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的提交
（commit）mutation。这样使得我们可以方便的跟踪每一个状态的变化，
从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。
安装使用vuex
npm i vuex
vuex的使用一
// main.js
import Vue from 'vue'
import App from 'App'
import router from 'router'
import vuex from 'vuex'
// 使用vuex
Vue.use(vuex)
// 实例化仓库store
const store = new vuex.Store({
state: {
show: false,
},
getattrs: {
},
mutations: {},
});
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>
});
vuex的使用二
// 为了方便维护，我们通常把在src下面新建一个store文件夹，
// 然后在里面新建一个index.js
import Vue from 'vue' // 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'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>
});
State
state是保存我们data中需要共享的数据。
由于Vuex的存储是响应式的，从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。
Getter
getter它就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，只有它的依赖发生改变时，才会重新计算。
获取仓库store中的数据
this.$store.state.xxxx
this.$store.getters.xxxx
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都有一个字符串的事件类型（type），和一个回调函数handler。
也就是说我们要触发mutation中定义的方法（type），然后才会执行这个方法（handler）。
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组件也会更新。
这就意味着vue中的mutation也需要与使用vue一样遵守一些注意事项：
1，最好提前在你的store中初始化好所有的所需要的属性
2，当对象需要添加属性时，你应该使用
Vue.set(obj, 'newProp',123)
以新对象代替老对象 state.obj = { ...state.obj,newProp:123 }
改变仓库中的数据
-- 组件向仓库提交修改事件
this.$store.commit('事件名称',data)
-- 在仓库的mutations中
mutations: {
'事件名称': function (state, data) {
修改state中的数据
}
}
-- 注意计算属性
仓库中数据建议都放在计算属性中
axios的简单使用
基于promise的HTTP请求客户端，可以同时在浏览器和node.js使用。
使用npm安装axios
npm i axios -D
基本的配置
实现ajax技术的工具
// main.js import axios from 'axios'
// 在vue的原型链中加入方法 Vue.prototype.$axios = axios // 组件中 methods: { init() { this.$axios({ method: 'get', url: 'user', }) }, };
基本使用
get请求
test() {
this.$axios.get(this.$store.state.apiList.course,{
params: {
id : 123,
}
}).then(function(response){
// 请求成功回调函数
}).catch(function(response){
// 请求失败的回调函数
})
}
post请求
test() {
this.$axios.post(this.$store.state.apiList.course,{
params: {
id : 123,
}
}).then(function(response){
// 请求成功回调函数
}).catch(function(response){
// 请求失败的回调函数
})
}
发送多个请求
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发送请求拿到数据
跨域问题
