https://github.com/lukasborawski/vue-use-state-effect

Fast and small library, built on top of the native Vue.js API that will provide a safe and sharable (across the app) state for your local composables and functions.
https://github.com/lukasborawski/vue-use-state-effect

Last synced: 3 months ago
JSON representation

Fast and small library, built on top of the native Vue.js API that will provide a safe and sharable (across the app) state for your local composables and functions.

• Host: GitHub
• URL: https://github.com/lukasborawski/vue-use-state-effect
• Owner: lukasborawski
• License: isc
• Created: 2022-05-05T17:18:37.000Z (over 2 years ago)
• Default Branch: develop
• Last Pushed: 2023-06-09T22:27:50.000Z (over 1 year ago)
• Last Synced: 2024-10-20T13:58:58.530Z (3 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vue-use-state-effect
• Size: 563 KB
• Stars: 37
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
## Vue Use State Effect

**CAUTION**: Built and tested for/with **Vue 3** and/or **Nuxt 3** (RC-12).

Fast and small library, built on top of the native `scopeEffect` **Vue 3 API** that will provide safe and sharable (across the app) state for your local composables and functions. It might be a good replacement for **Vuex** or **Pinia** state management, if you need smaller and less extensive solution.

**Check out the Stackblitz Nuxt 3 demo [here](https://stackblitz.com/edit/vue-use-state-effect-demo).** 🚀

### Motivation / Story

---

You can read all about the technical background and all the details in this [article](https://itnext.io/vue-use-state-effect-14f81a6c8d62).

Configuration (docs) and examples can be found [here](https://github.com/lukasborawski/vue-use-state-effect).

### Install

---

Install the package:

```bash

$ npm i vue-use-state-effect --save

# or

$ yarn add vue-use-state-effect

```

### Usage

---

Create local composable with some state and pass it to the `useStateEffect`.

```javascript

import { useStateEffect } from 'vue-use-state-effect'

const composable = () => {

  /* your composable logic here */

}

export const useSharedComposable = useStateEffect(composable, { ...config })

```

Interface (**TypeScript**).

```typescript

interface UseStateEffectConfig {

  readonly name?: string | null

  readonly destroy?: boolean | 'custom'

  readonly debug?: boolean

}

export type UseStateEffectOptions = {

  readonly destroyLabels: string[]

  readonly props: ExtractPropTypes<{ stateEffectDestroyLabel: string } | T>

}

export function useStateEffect ReturnType>(

  composable: T,

  config?: UseStateEffectConfig,

): (opts?: UseStateEffectOptions) => {

  [keyof in string | 'state']: ReturnType

}

```

Please check the configuration, all the details and examples [here](https://github.com/lukasborawski/vue-use-state-effect).

---

**Support**: Want to support? [Buy me a coffee](https://www.buymeacoffee.com/lukas.borawski) or [sponsor](https://github.com/sponsors/lukasborawski) me via GitHub.