@liuli-util/mobx-vue3-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    @liuli-util/mobx-vue3-hooks

    Introduction

    An inspiration: If we can use hooks like vue3 in react without manually managing dependencies, will life be better? So I spent a little time implementing several hooks functions commonly used in vue3 based on mobx.

    Quick start

    import { defineComponent, useVRef, useVFn, useVComputed } from '@liuli-util/mobx-vue3-hooks'
    
    const HelloWorld = defineComponent(() => {
      const state = useVRef(0)
      const computedValue = useVComputed(() => state.value * 2)
    
      const onInc = useVFn(() => {
        state.value++
      })
      return (
        <div>
          <button onClick={onInc}>Add</button>
          <div>{computedValue.value}</div>
        </div>
      )
    })

    API

    • defineComponent: Define a component
    • useVReactive: Create a mutable state of an object type
    • useVRef: create a primitive type of mutable state
    • useVComputed: Create a calculated value
    • useVFn: Create an ordinary function (in vue3, you only need to declare the ordinary function in the setup function)
    • useVWatchEffect: Create a watch to monitor state changes and respond to them
    • useVWatch: Same type as useVWatchEffect but allows to pass in dependencies. The difference from vue3 is that you must use a function instead of a value

    Source of inspiration: https://github.com/RisingStack/react-easy-state#local-stores-in-function-components, related discussion: https://github.com/mobxjs/mobx/discussions/3209

    Keywords

    none

    Install

    npm i @liuli-util/mobx-vue3-hooks

    DownloadsWeekly Downloads

    5

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    15.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • rxliuli