{"id":20322685,"url":"https://github.com/asasugar/vuex-composition-maphooks","last_synced_at":"2025-03-04T10:14:17.479Z","repository":{"id":57396932,"uuid":"452585025","full_name":"asasugar/vuex-composition-maphooks","owner":"asasugar","description":"🎉 To support vuex-composition map* helper functions","archived":false,"fork":false,"pushed_at":"2022-02-08T04:05:41.000Z","size":20,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-16T12:02:25.760Z","etag":null,"topics":["composition-api","maphooks","vue-composition-api","vuex","vuex-composition","vuex-maphooks","vuex4"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asasugar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-27T07:38:12.000Z","updated_at":"2025-01-03T06:04:41.000Z","dependencies_parsed_at":"2022-09-13T10:22:01.276Z","dependency_job_id":null,"html_url":"https://github.com/asasugar/vuex-composition-maphooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asasugar%2Fvuex-composition-maphooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asasugar%2Fvuex-composition-maphooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asasugar%2Fvuex-composition-maphooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asasugar%2Fvuex-composition-maphooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asasugar","download_url":"https://codeload.github.com/asasugar/vuex-composition-maphooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241827165,"owners_count":20026601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","maphooks","vue-composition-api","vuex","vuex-composition","vuex-maphooks","vuex4"],"created_at":"2024-11-14T19:24:16.974Z","updated_at":"2025-03-04T10:14:17.451Z","avatar_url":"https://github.com/asasugar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuex-composition-maphooks\nTo support vuex-composition map* helper functions\n\n```\nyarn add vuex-composition-maphooks\n```\n```js\n// *.vue\nimport { useState, useGetters, useMutations, useActions } from 'vuex-composition-maphooks';\n...\n```\n\n\n[中文文档](https://github.com/asasugar/vuex-composition-maphooks/blob/master/README.zh-CN.md)\n## useState\n- `namespace` parameter is not required, it is required if `modules` is set to `namespaced: true`\n- `states` optional type: Array | Object (supports custom states method name)\n\n\n- states using Array usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport { useState } from 'vuex-composition-maphooks';\n\nconst { userinfo } = useState('A', ['userinfo']);\nconst user = ref(userinfo());\n\u003c/script\u003e\n\n```\n\n- states using Object usage\n\n```js\n...\nconst { d } = useState('A', { userinfo: 'd' });\nconst user = ref(d());\n```\n\n## useGetters\n\n- `namespace` parameter is not required, it is required if `modules` is set to `namespaced: true`\n- `getters` optional type: Array | Object (supports custom getters method name)\n\n- getters using Array usage\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport { useGetters } from 'vuex-composition-maphooks';\nconst { unDoList, doList } = useGetters('A', ['unDoList', 'doList']);\n// or\nconst { unDoList, doList } = useGetters(['A/unDoList', 'A/doList']);\n\nconst a = ref(unDoList());\nconst b = ref(doList());\n\u003c/script\u003e\n```\n\n- getters using Object usage\n```js\n...\nconst { d, e } = useGetters('A',{ unDoList: 'd', doList: 'e'});\n// or \nconst { d, e } = useGetters({ 'A/unDoList': 'd', 'A/doList': 'e'});\n\nconst a = ref(d());\nconst b = ref(e());\n...\n\n```\n\n\n## useMutations\n\n- `namespace` parameter is not required, it is required if `modules` is set to `namespaced: true`\n- `mutations` optional type: Array | Object (supports custom mutations method name)\n\n- mutations using Array usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport { useMutations } from 'vuex-composition-maphooks';\n\nconst { INCREMENT } = useMutations('A', ['INCREMENT']);\n// or\nconst { INCREMENT } = useMutations(['A/INCREMENT']);\n\n\u003c/script\u003e\n\n```\n- mutations using Object usage\n\n```js\n...\nconst { d } = useMutations('A', { 'INCREMENT': 'd'});\n// or\nconst { d } = useMutations({ 'A/INCREMENT': 'd'});\n...\n```\n\n## useActions\n- `namespace` parameter is not required, it is required if `modules` is set to `namespaced: true`\n- `actions` optional type: Array | Object (supports custom actions method name)\n\n\n- actions using Array usage\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { useActions } from 'vuex-composition-maphooks';\n\n// Scenario 1: Modules A and B do not set a clear space\nconst { go, back } = useActions(['go','back']);\n\n// Scenario 2: Module A is set to indicate space, and module B is not set to indicate space\nconst { go, back } = useActions(['A/go', 'back']);\n// or\nconst { go } = useActions('A', ['go']);\nconst { back } = useActions(['back']);\n\n// Scenario 3: Both modules A and B are set to indicate the space\nconst { go, back } = useActions(['A/go', 'B/back']);\n// or\nconst { go } = useActions('A', ['go']);\nconst { back } = useActions('B', ['back']);\n\u003c/script\u003e\n```\n\n- actions using Object usage\n\n```js\n...\n\n// Scenario 1\nconst { d, e } = useActions({ go: 'd', back: 'e' });\n\n// Scenario 2\nconst { d, e } = useActions({ 'A/go': 'd', back: 'e' });\n// or\nconst { d } = useActions({ 'A/go': 'd' }); \nconst { e } = useActions({ back: 'd' });\n\n// Scenario 3\nconst { d, e } = useActions({ 'A/go': 'd', 'B/back': 'e' });\n// or\nconst { d } = useActions({ 'A/go': 'd' }); \nconst { e } = useActions({ 'B/back': 'e' });\n...\n\n```\n\n## Summary\n- `namespace` is not required, but setting `namespaced: true` is required, and setting `namespaced` is highly recommended!!!\n- The `key` of the second parameter of `useState` cannot be a string concatenating `modules name`, it must be the specified `state`\n- `useGetters` , `useMutations` , `useActions` The `key` of the second parameter can be concatenated as a string of `modules name`, as shown in the above example\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasasugar%2Fvuex-composition-maphooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasasugar%2Fvuex-composition-maphooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasasugar%2Fvuex-composition-maphooks/lists"}