vanity

simple, reactive state management for any framework using @vue/reactivity

vanity keeps business logic simple by abstracting it away from application state management. It can be used as a lightweight global store, or paired with a state management pattern like vuex to better separate concerns.

While vanity was created with vue in mind, it works out of the box with other frameworks like svelte, react, and angular.

Installation

yarn add @replygirl/vanity

Usage

// Creating a service

import { createService } from '@replygirl/vanity'

type State = {
  bar: boolean | null
}

export default createService<State>({
  name: 'foo',
  baseState: {
    bar: null
  },
  methods: ({ clear, commit, state }) => ({
    setBar(bar: boolean) {
      if (bar !== state.bar) commit({ bar })
    },
    reset() {
      clear()
    }
  })
})

// Consuming a service

import { watchEffect } from '@vue/reactivity'

import foo from '@/services/foo'

watchEffect(() => console.info(foo.bar)) // null

foo.setBar(true) // true

foo.reset() // null

License

ISC (c) 2020 replygirl