https://github.com/echo008/vuex-composition

A util package to use Vuex with Composition API easily.
https://github.com/echo008/vuex-composition

Last synced: 11 months 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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-06T11:24:24.000Z (over 2 years ago)
• Last Synced: 2025-03-24T08:06:46.486Z (12 months ago)
• Language: TypeScript
• Size: 34.2 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• 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