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
....
省略路由和其他组件导入方式....
....
// 导入vuex
import store from './store'
//使用sotre
new Vue({
el: '#app',
router,
store, // vuex
components: { App },
template: '<App/>'
});
2. src/store/index.js (vuex配置)
// 导入vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.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>
网友评论