本文描述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>
浏览器效果图
结语:希望大家都可以完美完成工作,早早下班,