Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/echo008/vuex-composition
A util package to use Vuex with Composition API easily.
https://github.com/echo008/vuex-composition
Last synced: about 1 month ago
JSON representation
A util package to use Vuex with Composition API easily.
- Host: GitHub
- URL: https://github.com/echo008/vuex-composition
- Owner: echo008
- License: mit
- Created: 2023-08-07T11:03:44.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2023-09-06T11:24:24.000Z (9 months ago)
- Last Synced: 2024-01-08T08:50:24.718Z (5 months ago)
- Language: TypeScript
- Size: 34.2 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vuex-composition - A util package to use Vuex with Composition API and Reactivity API easily. (Components & Libraries / Utilities)
README
# vuex-composition
[![npm](https://img.shields.io/npm/v/vuex-composition.svg)](https://www.npmjs.com/package/vuex-composition)
A util package to use Vuex with Composition API easily.
## Installation
```shell
$ npm install vuex-composition$ yarn add vuex-composition
$ pnpm install vuex-composition
```### Basic Usage Examples
```html
import { computed } from 'vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex-composition'const { article, comments } = mapState(['article', 'comments'])
const { fullname } = mapGetters(['fullname'])
const { SET_USER_INFO } = mapMutations(['SET_USER_INFO'])
const { fetch } = mapActions(['fetch'])// 设置用户信息
const userInfo = {}
SET_USER_INFO(userInfo)// 请求数据
const url = ''
const params = {}
const getData = fetch(url, params)// 响应式
const articleRef = computed(() => article)
const commentsRef = computed(() => comments)
const fullnameRef = computed(fullname)```
### Reactive Usage Examples
```html
import { computed } from 'vue'
import { mapStateRefs, mapGettersRefs } from 'vuex-composition'// 响应式
const { article, comments } = mapStateRefs(['article', 'comments'])
const { fullname } = mapGettersRefs(['fullname'])// article => articleRef = computed(() => article)
// fullnameRef => computed(fullname)```
### Full Usage Examples
```html
import { computed } from 'vue'
import { mapStoreRefs } from 'vuex-composition'// 响应式
const { article, comments, fullname, SET_USER_INFO, fetch } = mapStoreRefs()```
### Modules Usage Examples
```html
import { computed } from 'vue'
import { mapState, mapGetters, mapStateRefs, mapGettersRefs, mapMutations, mapActions } from 'vuex-composition'const { article, comments } = mapState('common', ['article', 'comments'])
const { fullname } = mapGetters('common', ['fullname'])const { article as articleRef, comments as commentsRef } = mapStateRefs('common', ['article', 'comments'])
const { fullname as fullnameRef } = mapGettersRefs('common', ['fullname'])const { SET_USER_INFO } = mapMutations('common', ['SET_USER_INFO'])
const { fetch } = mapActions('common', ['fetch'])// 设置用户信息
const userInfo = {}
SET_USER_INFO(userInfo)// 请求数据
const url = ''
const params = {}
const getData = fetch(url, params)// 响应式
const articleRef = computed(() => article)
const commentsRef = computed(() => comments)
const fullnameRef = computed(fullname)```
### Namespaced Usage Examples
```html
import { createNamespacedHelpers } from 'vuex-composition'
const { mapState, mapGetters, mapStateRefs, mapGettersRefs, mapMutations, mapActions, mapStoreRefs } = createNamespacedHelpers('common')const { article, comments } = mapState('common', ['article', 'comments'])
const { fullname } = mapGetters('common', ['fullname'])const { article as articleRef, comments as commentsRef } = mapStateRefs('common', ['article', 'comments'])
const { fullname as fullnameRef } = mapGettersRefs('common', ['fullname'])```
### useStore Usage Examples
> Consider separate the store composition file from the store usage inside the component
```html
import { useStore } from 'vuex'
import { createNamespacedHelpers } from 'vuex-composition';
import { mapState, mapGetters, mapStateRefs, mapGettersRefs, mapMutations, mapActions } from 'vuex-composition'const store = useStore()
const { article, comments } = mapState(store, 'common', ['article', 'comments'])
const { fullname } = mapGetters(store, ['fullname'])const { article as articleRef, comments as commentsRef } = mapStateRefs(store, ['article', 'comments'])
const { fullname as fullnameRef } = mapGettersRefs(store, 'common', ['fullname'])const { SET_USER_INFO } = mapMutations(store, 'common', ['SET_USER_INFO'])
const { fetch } = mapActions(store, ['fetch'])const { article, comments, fullname, SET_USER_INFO, fetch } = mapStoreRefs(store, 'common')
// 设置用户信息
const userInfo = {}
SET_USER_INFO(userInfo)// 请求数据
const url = ''
const params = {}
const getData = fetch(url, params)// 响应式
const articleRef = computed(() => article)
const commentsRef = computed(() => comments)
const fullnameRef = computed(fullname)```
### If you like it, please star it