本文描述Vue3如何使用Vuex，vue2点这里
Vue2 vuex贯穿全局,通篇掌握_技术前端，忠于热爱-CSDN博客
目录
Vue3 使用语法糖(mapState)取出vuex state的数据
Vue3 使用语法糖(mapGetters) 取出vuex getters的数据
Vue3 使用语法糖（mapMutations）取出vuex mutations的数据
Vue3 使用语法糖（mapActions）取出vuex actions的数据
Vue3 的语法糖，可不是很简单，特别对于刚接触vuex的小伙伴儿。但本文是极简的，等熟练使用vue2中vuex语法，再看vue3的vuex使用方法也不会太晦涩，建议收藏备用！
先在store/index.js定义数据
在页面使用
浏览器 效果
语法糖 首次现身
哎！不想写这么长，那你用语法糖，（就可以不写$store.state.）
需要引入useStore事例，因为没有this，建议在computed中取出vuex的数据，否则vuex数据就会失去相应式，
也就是说你用一个vuex的变量，就需要声明一个computed比较麻烦是吧
配合下面图一起更容易理解
vue3 使用computed 取出vuex数据
那有没不写$store.state，< 又不用定义太多的computed >，可以使用语法糖，但是需要自己写循环函数，难度来啦
Vue3 使用语法糖(mapState)取出vuex state的数据
<template>
<div>
<div>{
{ $store.state.counter }}</div>
<div>{
{ counter }}</div>
<div>{
{ age }}</div>
<div>{
{ height }}</div>
</div>
</template>
<script>
import { useStore, mapState } from "vuex";
import { computed } from "vue";
export default {
components: {},
setup() {
// 因为this指向的不是当前组件事例，所以引入useStore事例赋值一个变量，方便获取
const store = useStore();
// 上面说了用一个vuex的数据，就需要定义一个computed，也就是说计算属性只能取出一个vuex数据
// 那这样用语法糖，解构这么多，想要用在computed中只能循环取出，循环取出之后会发现报错，
// 找不到store，是因为this问题，所以改变this指向，
const storeArr = mapState(["counter", "age", "height"]);
const storeState = {};
Object.keys(storeArr).forEach((fnKey) => {
const fn = storeArr[fnKey].bind({ $store: store });
storeState[fnKey] = computed(fn);
});
return {
store,
storeArr,
...storeState,
};
},
};
</script>
<style lang="scss" scoped></style>
再配合图解必须学会vue3 vuex的语法糖
浏览器效果图 
还是没明白，请揍我！
Vue3 使用语法糖(mapGetters) 取出vuex getters的数据
store/index.js 位置
<template>
<div>
<h2>{
{ nameInfo }}</h2>
<h2>{
{ AgeInfo }}</h2>
</div>
</template>
<script>
import { computed } from "vue";
import { mapGetters, useStore } from "vuex";
export default {
components: {},
setup() {
// 拿到store独享
const store = useStore();
const storeGetterFns = mapGetters(["nameInfo", "AgeInfo"]);
// 对数据进行转换
const storeGetters = {};
Object.keys(storeGetterFns).forEach((fnKey) => {
const fn = storeGetterFns[fnKey].bind({ $store: store });
storeGetters[fnKey] = computed(fn);
});
return {
...storeGetters,
};
},
};
</script>
<style lang="scss" scoped></style>
浏览器效果图
Vue3 使用语法糖（mapMutations）取出vuex mutations的数据
<template>
<div>
<h2>当前计数: {
{ $store.state.counter }}</h2>
<hr />
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<hr />
<button @click="increment_n({ n: 10 })">+10</button>
<hr />
</div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
setup() {
const storeMutations = mapMutations(["increment", "decrement","increment_n"]);
return {
...storeMutations,
};
},
};
</script>
<style scoped></style>
浏览器效果图：
Vue3 使用语法糖（mapActions）取出vuex actions的数据
两种触发方法，两种定义形式，学会则掌握雷电 !
<template>
<div>
<h2>当前计数: {
{ $store.state.counter }}</h2>
<hr />
<button @click="incrementAction">+1</button>
<button @click="decrementAction">-1</button>
<hr />
<button @click="add">+1</button>
<button @click="sub">-1</button>
<hr />
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
setup() {
// 数组形式
const actions = mapActions(["incrementAction", "decrementAction"]);
// 对象形式
const actions2 = mapActions({
add: "incrementAction",
sub: "decrementAction",
});
return {
...actions,
...actions2,
};
},
};
</script>
<style scoped></style>
浏览器效果图
结语：希望大家都可以完美完成工作，早早下班，