# vue-tiny-store

**Repository Path**: yansen_zh/vue-tiny-store

## Basic Information

- **Project Name**: vue-tiny-store
- **Description**: 利用 vue3 的 provide/inject 方法整合的适用中小团队的 store 管理系统
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-09
- **Last Updated**: 2022-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @zjxpcyc/vue-tiny-store

[react-tiny-store](https://gitee.com/yansen_zh/react-tiny-store) 的兄弟版本

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

## 安装

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


## 使用
### 1、 自定义一个 hook 作为 model

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

```javascript
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` 里面

```javascript
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 中引入
```javascript
import store from './store'

app.use(store)

```

### 3、子组件调用

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

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

  return { foo }
}
```