Vue3中如何使用vuex语法糖
以vue3+vuex+typescript为例
我们知道,vue3的新型compositionApi非常方便,可以像react一样自定义hooks,但又比react更容易理解,那么针对setup中如何使用vuex呢?我搜寻久已都没有找到完整的说法,今天在这里小总结,希望看到的小伙伴觉得实用,感谢!!
原来的vuex语法糖用法
直接上代码吧
import { mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default {
...
computed:{
...mapState(['useInfo']),
//以下是带命名空间的
//...mapState('user',['useInfo']),
//...mapState({
// userInfo: (sate) => state.user.userInfo
//}),
...mapGetters(['getUserInfo']),
//以下是带命名空间的
//...mapGetters(['getUserInfo'])
//...mapGetters({
// userInfo: "user/getUserInfo"
//})
},
methods:{
...mapActions(['setUserInfo']),
//以下是带命名空间的
//...mapActions({
// setUserInfo: 'user/setUserInfo'
//})
...mapActions(['setUserInfo']),
//以下是带命名空间的
//...mapMutations({
// setUserInfo: 'user/setUserInfo'
//})
}
...
}
新的vuex语法糖用法
重点看bind方法的作用,就可以把相关的语法糖绑定,最终返回一个动态的Ref或者Reactive,相关资料自行查阅。
还是直接上代码吧
import { computed, defineComponent, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore, mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default defineComponent({
...
setup() {
const route = useRoute();
onMounted(() => {
console.log(route.fullPath);
});
const store = useStore();
const isLoading = computed(
mapGetters(['getLoading']).getLoading.bind({ $store: store })
);
// const netError = computed(
// mapGetters(['getNetError']).getNetError.bind({ $store: store })
// );
const netError = computed(
mapState(['netError']).netError.bind({ $store: store })
);
console.log(netError);
// const setLoading = mapActions(['setLoading']).setLoading.bind({
// $store: store
// });
const setLoading = mapMutations(['setLoading']).setLoading.bind({
$store: store
});
const freshPage = () => {
setLoading(true);
//window.location.reload();
setTimeout(() => {
setLoading(false);
}, 2000);
};
return {
route,
isLoading,
netError,
freshPage
};
}
...
})
结尾
以上就是一个小小的对比和总结,当然你也可以使用上述setup中定义的store去取到相关的信息和值,那样的话,写法和老的vue2中的写法差不多,还有一种是,直接定义到computed上,举例
import { mapState, mapGetters} from 'vuex'
export default defineComponent({
...
computed: mapGetters(['getUserInfo'])
//或者也可以使用老的办法
//computed: {
// ...mapGetters(['getUserInfo'])
//带命名空间
// ...mapGetters({
// userInfo: "user/getUserInfo"
// })
//}
...
})
总之,本文主要讲述针对vue3中setup中如何使用vuex语法糖的问题,小小总结,希望有所帮助。
更多资料请查看
[1] https://v3.cn.vuejs.org/guide/introduction.html
[2] https://vuex.vuejs.org/zh/