npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuex-composition-maphooks

v1.0.2

Published

To support vuex-composition map* helper functions

Downloads

10

Readme

vuex-composition-maphooks

To support vuex-composition map* helper functions

yarn add vuex-composition-maphooks
// *.vue
import { useState, useGetters, useMutations, useActions } from 'vuex-composition-maphooks';
...

中文文档

useState

  • namespace parameter is not required, it is required if modules is set to namespaced: true

  • states optional type: Array | Object (supports custom states method name)

  • states using Array usage

<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 using Object usage
...
const { d } = useState('A', { userinfo: 'd' });
const user = ref(d());

useGetters

  • namespace parameter is not required, it is required if modules is set to namespaced: true

  • getters optional type: Array | Object (supports custom getters method name)

  • getters using Array usage

<script setup lang="ts">
import { ref } from 'vue';
import { useGetters } from 'vuex-composition-maphooks';
const { unDoList, doList } = useGetters('A', ['unDoList', 'doList']);
// or
const { unDoList, doList } = useGetters(['A/unDoList', 'A/doList']);

const a = ref(unDoList());
const b = ref(doList());
</script>
  • getters using Object usage
...
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 parameter is not required, it is required if modules is set to namespaced: true

  • mutations optional type: Array | Object (supports custom mutations method name)

  • mutations using Array usage

<script setup lang="ts">
import { ref } from 'vue';
import { useMutations } from 'vuex-composition-maphooks';

const { INCREMENT } = useMutations('A', ['INCREMENT']);
// or
const { INCREMENT } = useMutations(['A/INCREMENT']);

</script>
  • mutations using Object usage
...
const { d } = useMutations('A', { 'INCREMENT': 'd'});
// or
const { d } = useMutations({ 'A/INCREMENT': 'd'});
...

useActions

  • namespace parameter is not required, it is required if modules is set to namespaced: true

  • actions optional type: Array | Object (supports custom actions method name)

  • actions using Array usage

<script setup lang="ts">
import { useActions } from 'vuex-composition-maphooks';

// Scenario 1: Modules A and B do not set a clear space
const { go, back } = useActions(['go','back']);

// Scenario 2: Module A is set to indicate space, and module B is not set to indicate space
const { go, back } = useActions(['A/go', 'back']);
// or
const { go } = useActions('A', ['go']);
const { back } = useActions(['back']);

// Scenario 3: Both modules A and B are set to indicate the space
const { go, back } = useActions(['A/go', 'B/back']);
// or
const { go } = useActions('A', ['go']);
const { back } = useActions('B', ['back']);
</script>
  • actions using Object usage
...

// Scenario 1
const { d, e } = useActions({ go: 'd', back: 'e' });

// Scenario 2
const { d, e } = useActions({ 'A/go': 'd', back: 'e' });
// or
const { d } = useActions({ 'A/go': 'd' }); 
const { e } = useActions({ back: 'd' });

// Scenario 3
const { d, e } = useActions({ 'A/go': 'd', 'B/back': 'e' });
// or
const { d } = useActions({ 'A/go': 'd' }); 
const { e } = useActions({ 'B/back': 'e' });
...

Summary

  • namespace is not required, but setting namespaced: true is required, and setting namespaced is highly recommended!!!
  • The key of the second parameter of useState cannot be a string concatenating modules name, it must be the specified state
  • useGetters , useMutations , useActions The key of the second parameter can be concatenated as a string of modules name, as shown in the above example