https://github.com/asasugar/vuex-composition-maphooks

🎉 To support vuex-composition map* helper functions
https://github.com/asasugar/vuex-composition-maphooks

composition-api maphooks vue-composition-api vuex vuex-composition vuex-maphooks vuex4

Last synced: 1 day ago
JSON representation

🎉 To support vuex-composition map* helper functions

• Host: GitHub
• URL: https://github.com/asasugar/vuex-composition-maphooks
• Owner: asasugar
• License: mit
• Created: 2022-01-27T07:38:12.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-08T04:05:41.000Z (almost 3 years ago)
• Last Synced: 2024-11-05T02:47:09.624Z (11 days ago)
• Topics: composition-api, maphooks, vue-composition-api, vuex, vuex-composition, vuex-maphooks, vuex4
• Language: TypeScript
• Homepage:
• Size: 19.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vuex-composition-maphooks

To support vuex-composition map* helper functions

```

yarn add vuex-composition-maphooks

```

```js

// *.vue

import { useState, useGetters, useMutations, useActions } from 'vuex-composition-maphooks';

...

```

[中文文档](https://github.com/asasugar/vuex-composition-maphooks/blob/master/README.zh-CN.md)

## 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

```vue

import { ref } from 'vue';

import { useState } from 'vuex-composition-maphooks';

const { userinfo } = useState('A', ['userinfo']);

const user = ref(userinfo());

```

- states using Object usage

```js

...

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

```vue

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());

```

- getters using Object usage

```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` 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

```vue

import { ref } from 'vue';

import { useMutations } from 'vuex-composition-maphooks';

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

// or

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

```

- mutations using Object usage

```js

...

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

```vue

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']);

```

- actions using Object usage

```js

...

// 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