vue-unstated
A tiny state management library for Vue Composition API based on unstated-next which is for React.
🏇
Demo
![Edit [vue-unstated DEMO] Todo](https://codesandbox.io/static/img/play-codesandbox.svg)
🔌
Installation
$ npm install --save vue-unstated
or
$ yarn add vue-unstated
🏄
Usage
use/counter.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
<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
<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>
🏁
LICENSE
MIT
7 Mar 29, 2022
42 Aug 10, 2022
2 Oct 12, 2021
2.2k Dec 27, 2022
49 Apr 28, 2022
3 Nov 4, 2019
1 Apr 3, 2018
23 Sep 27, 2022
27.9k Dec 30, 2022
36 May 5, 2021
11 Jan 22, 2021
149 Nov 24, 2022
466 Dec 30, 2022
0 Dec 30, 2021
4 Jul 2, 2022
138 Sep 21, 2022
4 Jan 17, 2022
42 Feb 18, 2022