@zjxpcyc/vue-tiny-store

react-tiny-store 的兄弟版本

利用 vue3 的 provide/inject 方法整合的适用中小团队的 store 管理系统

安装

npm install -S @zjxpcyc/vue-tiny-store

使用

1、 自定义一个 hook 作为 model

比如我需要自定义个全局的 user，则可以如下解决：

import { reactive } from 'vue'

export default function useUser() {
  const user = reactive({})

  const signIn = () => {
    // xxx
  }
  
  const signOut = () => {
    // xxx
  }

  return {
    user,
    signIn,
    signOut
  }
}

2、创建 Store

• 创建 store, 把所有定义的 model 收集到一个 models 里面

import createStore from '@zjxpcyc/vue-tiny-store'

import useFoo from './useFoo'
import useBar from './useBar'

const models = {
  'foo': useFoo,
  'bar': useBar
}

const store = createStore(models)

export default store

• Vue 插件的方式在 app.js 中引入

import store from './store'

app.use(store)

3、子组件调用

import { useModel } from '@zjxpcyc/vue-tiny-store'

function setup (props) => {
  const { foo, setFoo } = useModel('foo')

  return { foo }
}