KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #ai-agent #developer-tools #claude-code #codex #deepseek-harness #ai-agents #cli #react #mcp

vue-unstated

★ 29 Open GitHub ↗

A tiny state management library for Vue Composition API.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![logo](https://raw.githubusercontent.com/resessh/vue-unstated/master/assets/logo.png)

----
# vue-unstated
A tiny state management library for Vue Composition API based on [unstated-next](https://github.com/jamiebuilds/unstated-next) which is for React.

## :horse_racing: Demo
[![Edit [vue-unstated DEMO] Todo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ugdg7-ugdg7?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fuse%2Ftodos.js&theme=dark)

## :electric_plug: Installation
```shell
$ npm install --save vue-unstated
```
or
```shell
$ yarn add vue-unstated
```

## :surfer: Usage
__use/counter.js__
```js
import { reactive } from '@vue/composition-api' // Vue 2 with @vue/composition-api
import { reactive } from 'vue' // or Vue 3
import { createContainer } from 'vue-unstated'

const useCounter = (initialState = { count: 0 }) => {
  const state = reactive(initialState)

const increment = () => {
    state.count++
  }

return { state, increment }
}

export const counterContainer = createContainer(useCounter)
```

__Parent.vue__
```vue
<script>
import { counterContainer } from 'use/counter'
import Child from 'Child.vue'

export default {
  components: { Child },
  setup() {
    // You can share same state in its child nodes!!
    const { state, increment } = counterContainer.provide()

return {
      count: state.count,
      increment,
    }
  }
}
</script>
```

__Child.vue__
```vue
<script>
import { counterContainer } from 'use/counter'

export default {
  setup() {
    // You can use same state with Parent.vue!!
    const { state, increment } = counterContainer.useContainer()

return {
      count: state.count,
      increment,
    }
  }
}
</script>
```

## :checkered_flag: LICENSE
MIT

vue-unstated

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README