vuex中的mapGetters、mapActions、mapState辅助函数的使用(映射getters、actions、state)
一、mapGetters映射关系
getters.js文件
//getters.js
export default {
cartLength(state) {
return state.cartList.length;
},
cartList(state) {
return state.cartList;
},
};
vue组件使用
mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性
1. 第一种使用方法:数组(不能改名字)
<template>
<div class="car">
<div>{{cartLength}}</div>
</div>
</template>
<script>
//mapGetters是一个函数,这个函数返回一个数组
import { mapGetters } from "vuex";
export default {
name: "car",
data() {
return {};
},
computed: {
//第一种方法:数组方法
...mapGetters(["cartLength"])
},
};
</script>
2. 第二种使用方法:对象(可以改名字)
<template>
<div class="car">
<div>{{length}}</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "car",
data() {
return {};
},
computed: {
//第二种方法:对象方法
...mapGetters({
length: "cartLength",
list: "cartList"
})
},
};
</script>
二、mapActions映射关系
actions.js
import { ADD_COUNT, ADD_TO_CART } from "./mutations-types";
export default {
addCart(context, payload) {
return new Promise((res, rej) => {
let oldProduct = context.state.cartList.find(item => {
return item.iid === payload.iid;
});
if (oldProduct) {
context.commit(ADD_COUNT, oldProduct);
res("当前商品数量+1");
} else {
payload.count = 1;
context.commit(ADD_TO_CART, payload);
res("添加了新的商品");
}
});
}
};
vue组件
import { mapGetters } from "vuex";
//注意这里是放在methods里面
methods:{
...mapActions(["addCart"])
},
clickCart() {
const cart = {};
cart.img = this.topImg[0];
cart.title = this.goods.title;
cart.desc = this.goods.desc;
cart.price = this.goods.realPrice;
cart.iid = this.iid;
this.addCart(cart).then(res => console.log(res));
//上面的代码恒等于this.$store.dispatch("addCart",cart).then(res => console.log(res));
}
三、mapState映射关系
import Vue from "vue"
import Vuex from "vuex"
import mutations from "./mutations.js"
import actions from "./actions.js"
import getters from "./getters.js"
Vue.use(Vuex)
const state={
userInfo:{},//用户信息
dorm:"请绑定宿舍"//用户宿舍
}
const store=new Vuex.Store({
state,
mutations,
actions,
getters,
modules:{}
})
export default store
https://www.cnblogs.com/qiu-Ann/p/11347863.html
1.数组方法
import {mapState} from "vuex"
export default {
name: 'info',
computed: {
...mapState(['dorm'])
},
}
2.对象方法
import {mapState} from "vuex"
computed: {
...mapState({
count: 'count', // 第一种写法
sex: (state) => state.sex, // 第二种写法,可以用于对象解构
from: function (state) { // 用普通函数this指向vue实例,要注意
return this.str + ':' + state.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.str
}
})
}
四、mapMutations 印射关系
methods: {
...mapMutations(["addCounter"]),
btnClick() {
this.addCounter({ mount: 1 });
}
}
注:以上内容仅用于日常学习