vuex官网API https://vuex.vuejs.org/zh-cn/
vuex其实就是数据仓库，用来管理数据，适用于大中型项目，当组件之间数据需要共享时，数据被改变时，组件全部被更新。
vuex 核心概念:
1. state：变量定义和初始化（组件中使用：this.$store.state.XX 获取)2. getters：以get方法 供外部调用来获取state值（组件中使用：this.$store.getters.XXX 获取）3. mutations：mutations作用主要是改变state中的值，通过commit('XXX')触发mutations中的方法，mutations中的方法必须是同步的，如果是异步的要放入actions中(组件中使用：this.$store.commit('XXX') 操作)4. actions：actions中的所有操作都是异步的（具体业务操作），也可以提交mutations改变state值(组件中使用：this.$store.dispatch('XXX') 操作)5. modules：将 store 分割成模块，每个模块都有自己的state、getters、mutations、actions
PS：1 - 4 操作可以通过导入模块映射方式以this.XXX来操作，详情见案例案例
1.在src/main.js中使用vuex
....
省略路由和其他组件导入方式....
....// 导入vueximport store from './store'//使用sotrenew Vue({ el: '#app',
router,
store, // vuex
components: { App }, template: '<App/>'});2. src/store/index.js (vuex配置)
// 导入vueimport Vue from 'vue'// 导入vueximport Vuex from 'vuex'// 使用vuexVue.use(vuex);//配置：const store = new Vuex.Store({ // 变量定义和初始化
state:{ num: 1
}, // 提供get方法 供外部调用,参数只有state
getters: {
getNum(state){ return state.num;
}, // 通过参数getters方式调用其他get方法
getNum2(state, getters){ return getters.getNum;
}
}, // mutations作用主要是改变state中的值，通过commit('XXX')触发mutations中的方法，mutations中的方法必须是同步的，如果是异步的要放入actions中
mutations: { //
changeNum(state){ //setTimeout(function(){ // 模拟异步操作
state.num++; //}, 10)
}, //方法第二个参数为外部传入，只能有一个，如果多个参数，第二个参数定义成对象
changeNum2(state, num){
state.num+=num;
}
}, // 异步操作，提交mutations改变state值，actions中的所有操作都是异步的
actions:{ // 第一个参数直接以store接收
changeNumFun(store){
setTimeout( function(){ // 模拟异步操作，实际值是时时改变的
store.commit('changeNum');
}, 100);
}, //第一个参数以commit接收，第二个参数只能有一个，如果多个值定义成对象
changeNumFun2({commit}, num){
commit('changeNum2', num)
}, // 异步操作 await等待返回
async changeNumFun3(store){ console.log('开始fun3'); var data = await store.dispatch('changeNumFun4'); console.log(data); console.log('结束开始fun3'); // 打印结果： 开始fun3、{'id': '111', name: 'zsstore'}、结束开始fun3
// 如果不使用await data输出放在最后
},
changeNumFun4(store){ return new Promise(resolve => {
setTimeout(() => { var data = {'id': '111', name: 'zsstore'};
resolve(data);
}, 1000);
});
}
}
});// 导出export default store;3.src/page/vuex/index.vue(vuex案例)
<template>
<div>
vuex使用({{num}})： <br>
使用getters获取：{{$store.getters.getNum2}} <br><br>
{{$store.state.num}} <br><br>
<button @click="cNum1">改变值 ++ (mutations)</button>
<br><br>
<button @click="cNum2">改变值 +2 (mutations)</button>
<br><br>
<button @click="cNum3">改变值 ++ (actions)</button>
<br><br>
<button @click="cNum4">改变值 +2 (actions)</button>
<br><br>
<button @click="cNum5">异步操作</button>
<br><br>
<button @click="cNum7">store中异步操作</button>
<br><br>
<button @click="cNum8">getters案例</button>
</div></template><script>
// 导入state
import { mapState } from 'vuex'
//导入mapMutations
import { mapMutations } from 'vuex'
// 导入mapActions
import { mapActions } from 'vuex'
// 导入mapGetters
import { mapGetters } from 'vuex'
//以上导入vuex各个模块，在本组件中通过映射方式定义，就可以以this.XXX来操作，否则就要this.$store.XXX来操作
export default {
data(){
retrun {
}
}, computed:{ // 映射 store的state
...mapState({ num: state => state.num
}), // 映射 store的getters
...mapGetters([ 'getNum', 'getNum2',
])
}, methods:{ //映射store的mutations
...mapMutations([ 'changeNum2', 'changeNum'
]), // 映射store中的actions
...mapActions([ 'changeNumFun', 'changeNumFun2'
]), //
cNum1(){ // 通过commit提交mutations改变state值
//this.$store.commit('changeNum')
// 通过mapMutations注入，直接this调用即可
this.changeNum();
},
cNum2(){ //this.$store.commit('changeNum2', 2);
//
this.changeNum2(3);
},
cNum3(){ //this.$store.dispatch('changeNumFun')
this.changeNumFun();
},
cNum4(){ //this.$store.dispatch('changeNumFun2', 2)
this.changeNumFun2(21,10);
}, async cNum5(){ // 1.
// var x = await this.cNum6().then((r)=>{
// console.log('r------------');
// console.log(r);
// return r;
// });
// 2.
var x = await this.cNum6(); console.log(x); console.log('调用完毕后事件...');
},
cNum6(){ return new Promise(resolve => {
setTimeout(() => { var data = {'id': '111', name: 'zs'};
resolve(data);
}, 1000);
});
},
cNum7(){ this.$store.dispatch('changeNumFun3')
},
cNum8(){ //console.log(this.$store.getters.getNum);
// 通过
console.log(this.getNum2);
}
},
created(){ console.log(this.$store.state.num);
}
}</script>
作者：圆梦人生
链接：https://www.jianshu.com/p/f7ebfbbd092b
随时随地看视频
