vuex-composition-maphooks

一个支持在Vue3 Composition API中使用Vuex4的辅助函数库,提供useState、useGetters、useMutations和useActions等hook,简化在setup函数中对Vuex的状态、getters、mutations和actions的映射和使用。

Check out vuex-composition-maphooks on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

yarn add vuex-composition-maphooks``````js// *.vueimport { useState, useGetters, useMutations, useActions } from 'vuex-composition-maphooks';...## useState- namespace 参数非必填,如果 modules 设置 namespaced: true 时必填- states 可选类型:数组 | 对象 (支持自定义states方法名)- states 使用数组的用法vue<script setup lang="ts">import { ref } from 'vue';import { useState } from 'vuex-composition-maphooks';const { userinfo } = useState('A', ['userinfo']);const user = ref(userinfo());</script>- states 使用对象的用法js...const { d } = useState('A', { userinfo: 'd' });const user = ref(d());## useGetters- namespace 参数非必填,如果 modules 设置 namespaced: true 时必填- getters 可选类型:数组 | 对象 (支持自定义getters方法名)- getters 使用数组的用法vue<script setup lang="ts">import { ref } from 'vue';import { useGetters } from 'vuex-composition-maphooks';const { unDoList, doList } = useGetters('A', ['unDoList', 'doList']);// orconst { unDoList, doList } = useGetters(['A/unDoList', 'A/doList']);const a = ref(unDoList());const b = ref(doList());</script>- getters 使用对象的用法js...const { d, e } = useGetters('A',{ unDoList: 'd', doList: 'e'});// or const { d, e } = useGetters({ 'A/unDoList': 'd', 'A/doList': 'e'});const a = ref(d());const b = ref(e());...## useMutations- namespace 参数非必填,如果 modules 设置 namespaced: true 时必填- mutations 可选类型:数组 | 对象 (支持自定义mutations方法名)- mutations 使用数组的用法vue<script setup lang="ts">import { ref } from 'vue';import { useMutations } from 'vuex-composition-maphooks';const { INCREMENT } = useMutations('A', ['INCREMENT']);// orconst { INCREMENT } = useMutations(['A/INCREMENT']);</script>- mutations 使用对象的用法js...const { d } = useMutations('A', { 'INCREMENT': 'd'});// orconst { d } = useMutations({ 'A/INCREMENT': 'd'});...## useActions- namespace 参数非必填,如果 modules 设置 namespaced: true 时必填- actions 可选类型:数组 | 对象 (支持自定义actions方法名)- actions 使用数组的用法vue<script setup lang="ts">import { useActions } from 'vuex-composition-maphooks';// 场景一: A、B模块都不设置命明空间时const { go, back } = useActions(['go','back']);// 场景二:A模块设置命明空间,B模块不设置命明空间const { go, back } = useActions(['A/go', 'back']);// orconst { go } = useActions('A', ['go']);const { back } = useActions(['back']);// 场景三:A、B模块都设置命明空间const { go, back } = useActions(['A/go', 'B/back']);// orconst { go } = useActions('A', ['go']);const { back } = useActions('B', ['back']);</script>- actions 使用对象的用法js...// 场景一: A、B模块不设置命明空间时const { d, e } = useActions({ go: 'd', back: 'e' });// 场景二:A模块设置命明空间,B模块不设置命明空间const { d, e } = useActions({ 'A/go': 'd', back: 'e' });// orconst { d } = useActions({ 'A/go': 'd' }); const { e } = useActions({ back: 'd' });// 场景三:A、B模块都设置命明空间const { d, e } = useActions({ 'A/go': 'd', 'B/back': 'e' });// orconst { d } = useActions({ 'A/go': 'd' }); const { e } = useActions({ 'B/back': 'e' });...## 总结- namespace 非必填,但是设置 namespaced: true 必填,并且强烈推荐设置 namespaced !!!- useState 第二个参数的 key 不能是拼接 modules name 的字符串,必须是指定的state- useGettersuseMutationsuseActions 第二个参数的 key 可以拼接是 modules name 的字符串,如上示例

Latest Weekly Picks

make.ink favicon
Weekly Pick

Your AI tattoo generator for pro-grade concepts

Leo Wade
sellfy.com favicon
Weekly Pick

A code-free online store builder to turn views into revenue. Sell digital products, subscriptions, and merch, without fees or hassle.

Maris
www.videotoblog.ai favicon
Weekly Pick

Convert videos into awesome blog posts.

Video To Blog
www.sellerpic.ai favicon
Weekly Pick

SellerPic is the all-in-one AI design platform for e-commerce

SellerPic
fastimage.ai favicon
Weekly Pick

Fast Image AI instantly transforms your photos into stunning styles like Ghibli, Sketch, and Pixar. Effortlessly control image elements and create amazing effects with just one click.

Fast AI Team
linkedinpro.daisy.so favicon
Weekly Pick

AI-powered tool that transforms casual photos into professional LinkedIn headshots instantly. No photographer needed—just upload and download.

Gabriel
crevas.ai favicon
Weekly Pick

Crevas unifies Veo 3, Sora 2, Nano Banana and more into one intuitive canvas — so filmmakers can script, prompt, and generate cinematic stories without switching tools or losing consistency.

Spark Alpha
fotominiatur.com favicon
Weekly Pick

AI Foto Edit - Text to Image & Image Edit

foto miniatur