Vuex简介
vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex 和单纯的全局对象有以下不同：
1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候，若stroe中的状态发生变化，那么响应的组件也会想的得到高效更新。
2、你不能直接改变stroe中的状态。改变stroe中的状态的唯一途径就是显示的提交(commit)mutation。这样使得我们可以方便快捷的跟踪每一个状态的变化，
从而让我们能够实现一些工具来帮助我们更好地了解我们的应用。
安装使用 Vuex
-- npm install vuex
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/>'
});
State
简而言之，state就是保存我们data中需要共享的数据。
由于Vuex的存储是响应式的，从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。
this.$store.state.count
// 创建一个组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count(){
return this.$store.state.count
}
}
};
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也可以接受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
}
},
});
Mutation
更改Vuex中的store中的状态的唯一方法是提交mutation。
每个mutation都有一个字符串的事件类型，和一个回调函数handler。
也就是说我们要触发mutation中自定义的方法，然后才会执行这个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需要遵守Vue的响应规则
既然vuex中的store中的状态是响应式的，那么当我们状态变更时，监视状态的vue组件也会更新。
这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项：
-- 1，最好提前在你的store中初始化好所有的所需要的属性
-- 2，当对象需要添加属性时，你应该使用
-- Vue.set(obj, 'newProp', 123)
-- 以新对象代替老对象 state.obj = { ...state.obj, newProp: 123}
axios的简单使用
Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
安装指令：
-- npm install axios -D
基本配置
// main.js
import axios from "axios"
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,{
course_title: "Python",
course_price: "19.88"
}).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()
网友评论