概述
Vuex是Vue.js应用程序的状态管理模式+库。
确保只能以可预测的方式改变状态
集中式存储和管理应用程序中所有组件的状态
安装
npm install vuex --save
基本流程
（一）.创建文件 vuex/index.js
//process.env.NODE_ENV 是开发环境(development、production)
手动设置环境变量
import Vue from 'vue'
import Vuex from 'vuex'
//作为插件引入
Vue.use(Vuex)
let store = new Vuex.Store({ //创建一个唯一的store,注意首字母大写->Store
strict: process.env.NODE_ENV !== 'production', //添加严格模式，非mutation则不能改变state数据，否则报错
state:{ //状态数据管理
num:1
},
getters:{ //丰富状态中数据的返回方式
getnum2:function(state){ //在computed中去获取getnum这个方法
return state.num*2
}
},
mutations:{ //mutations是唯一能改变state状态的方法
fn1:function(state){ //state是mutations中的方法的参数
state.num+=1; //操作数据
},
fn2:function(state,obj){ //可以将变量用参数带过来，最好对象形式，这样传递数据更加丰富
state.num+=obj.n;
}
},
actions:{ //actions中的方法是唯一异步操作数据的
delayfn1:function(context){ //context是一个类似vuex的实例，但是不是当前实例
setTimeout(function(){
context.commit('fn1'); //异步修改数据的核心，还是触发mutations的方法
},1000);
},
delayfn2:function(context,obj){ //传参的形式
setTimeout(function(){
context.commit('fn2',obj); //如果带参数，带到mutations方法中去
},1000);
}
}
})
export default store
（二）.在main.js入口文件中，引入声明的vuex/index.js
import Vue from 'vue'
import store from './vuex/'
import App from './App'
new Vue({
el : "#app",
store,
template:"（三）.在单文件组件中，使用vuex状态管理
1.vue单文件组件中，template中的代码
2.vue单文件组件中，script内的代码
export default {
computed:{
num1:function(){
return this.$store.state.num; //通过Vue实例上挂载的$store获取state中的数据
},
num2:function(){
return this.$store.getters.getnum2; //通过Vue实例上挂载的$store，获取getters上的 "数据乘2" 方法
}
},
methods:{
clickfn1:function(){
this.$store.commit("fn1");
//通过事件触发clickfn1函数，在事件处理函数中，通过this.$store的commit触发mutations中的方法
},
clickfn2:function(){
this.$store.commit("fn2",{ n:5 });
//同上，在事件处理函数中，可以带参数带到commit触发mutations中的方法中
},
delayclickfn1:function(){
this.$store.dispatch("delayfn1");
//通过dispatch可以触发异步actions中的方法
},
delayclickfn2:function(){
this.$store.dispatch("delayfn2",{ n:10 });
//同上，可以带参数过去
}
}
}
vuex的简写方法 mapState , mapGetters , mapMutations , mapActions
在单文件组件中
1.template模板中的代码
2.script标签中的代码
import {mapState , mapGetters , mapMutations , mapActions} from 'vuex'; //数据结构方法
export default {
computed:{
...mapState({
num1(state){
return state.num;
}
}),
...mapGetters({
num2 : "getnum2"
})
},
methods:{
...mapMutations({
clickfn1 : "fn1",
clickfn2 : "fn2" //如果需要传参的话，直接写在template中
}),
...mapActions({
delayclickfn1 : "delayfn1",
delayclickfn2 : "delayfn2" //如果需要传参的话，直接写在template中
})
}
}
【注】：修改函数名字
上面四种方式都可以使用简写形式：
使用别名：内部是对象
mapGetters({aaa:"bbb"}) 函数名为aaa
不适用别名：而不是数组
mapGetters(['bbb']) 函数名仍为bbb
modules 管理vuex中的模块
在vuex中，通过model 将不同的功能分开
方便我们更加快速的定位我们的需求位置
1.在vuex文件中
let module_aaa = { //模块名
state:{
num:1
},
getters:{
...
},
mutations:{
fn1:{...}
},
actions:{
...
}
}
let store = new Vuex.Store({
state:{
rootnum:10
},
getters:{
...
},
mutations:{
...
},
actions:{
rootfn:{...}
},
modules:{
module_aaa
}
})
2.在单文件组件中，使用时候
获取数据时候
this.$store.state.rootnum //获取根上的数据
this.$store.state.module_aaa.num //获取指定模块的数据
触发的函数时候
this.$store.commit('rootfn');
this.$store.commit("fn1"); //【注意】：触发子模块的函数时候，不需要加模块名称
vuex核心流程图
vuex原理图.jpg
1.【Vue components】 异步dispatch一个方法 【 后台 api通过ajax下载数据】
2.commit触发mutations方法 改变【state】数据
3.【state】数据改变了 render 界面上【Vue components】
vue devtool
在浏览器中，添加vue devtool插件，可以随时监测mutations对state的数据影响
(这也是为什么修改state数据只能在mutation中操作)
在vue-cli中引入至vue实例
安装
npm install axios vue-axios --save
在入口文件main.js中，将其作为Vue插件使用
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios) //use里面有顺序先后
在单文件组件中使用 （通过Vue原型就可以找到这个方法$http）
this.$http.get('xxxxx')
.then((res)=>{
console.log(res);
})
.catch((error)=>{
console.log(error);
})