vue-unstated

A tiny state management library for Vue Composition API based on unstated-next which is for React.

:horse_racing: Demo

:electric_plug: Installation

$ npm install --save vue-unstated

or

$ yarn add vue-unstated

:surfer: 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>

:checkered_flag: LICENSE

MIT