# sharem

> 基于vue3的状态管理工具

Latest version **1.0.0** (published 2022-04-23) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install sharem
pnpm add sharem
yarn add sharem
bun add sharem
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-04-23 |
| First published | 2022-04-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | aqua_neko |
| Maintainers | aqua_neko |
| Keywords | reactive, vue3, 状态管理 |

## Links

- npm: https://www.npmjs.com/package/sharem
- npm.io page: https://npm.io/package/sharem

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.0.0

## Recent versions

- 1.0.0 (latest) — 2022-04-23

## README

# sharem

> share modular

-   **优点:** 简单明了好上手

sharem是基于Vue3.0开发的状态管理工具(参考[Vuex](https://vuex.vuejs.org/zh/index.html)、[Pinia](https://pinia.web3doc.top/introduction.html))，相比于Vuex，我们更倾向于Pinia的轻量级，因此sharem"借鉴"了Pinia的Api

## 目录
-   [安装](#安装)
-   [API](#api)
-   [示例](#示例)

## 安装
将sharem添加为项目的依赖
```sh
$ npm install sharem
```
在你的项目中引用它:

```javascript
// 导入 sharem模块 的Api
import { defineStore, storeToRefs } from 'sharem'
```
## API

#### defineStore(options)
defineStore将会返回一个函数，执行这个函数可以拿到options转换后拿到[store](#)对象
|  属性  | 类型  | 描述  |
|  ---- | ----  | ----  |
| eventName  | Objecet | 配置选项 [详见](#options) |

**代码示例**
```Js
const useCountStore = defineStore({
	state: () => ({
		num: 0 
	}),
	actions: {
		increase() {
			this.num++
		}
	},
})
useCountStore() // => store对象
```
### options
options是一个对象，以下是它的数据格式
|  属性  | 类型  | 描述  |
|  ---- | ----  | ----  |
| state  | Function | state数据，参考vue2的 data函数 |
| actions  | Objecet | 方法体(可选)，参考vue2组件中的 methods |
**代码示例**
```Js
{
	state: () => ({
		num: 0 
	}),
	actions: {
		increase() {
			// 此时的this可以访问到 state 以及 actions里的内容
			this.num++
			this.test()
		},
		test(){
			console.log(1)
		},
	}
}
```



#### storeToRefs(store)
返回被解构store对象，只是想操作store里的某个数据或者看起来更简单，可以使用它
|  属性  | 类型  | 描述  |
|  ---- | ----  | ----  |
| store  | String | 事件名 |
| callback  | Function | 回调函数 |

**代码示例**
```Js
import { storeToRefs } from 'sharem'
import useCountStore from '@/stroe/useCountStore'
// template模板中使用=> {{ countStore.num }}  太麻烦   
const countStore = useCountStore()
countStore.num++


// 使用如下 template模板中使用=> {{ num }}
const { num } = storeToRefs(useCountStore)
num.value++

```


## 示例

```js
// useCountStore.js 中定义状态管理数据 并导出
export default defineStore({
	state: () => ({
		count: 0 
	}),
	actions: {
		increment() {
			this.count++;
		}
	}
})
```
```js
// index.vue 中导入，并使用
import useCountStore from 'useCountStore.js'
setup(){

	const countStore = useCountStore()
	// 可以直接修改
	countStore.num++
	
	// $patch与$reset为 每个store对象自带的Api，无需重复编写
	
	// 或者使用$patch
	countStore.$patch({
		num: countStore.num++
	})
	// 更推荐这中写法
	countStore.$patch(store=>{
		store.num++
	})
	// 调用该方法会将 options.state里的值初始化，慎用！
	countStore.$reset()
	
	return { countStore }
}
```
```Html
<!-- 在index.vue的template中使用 -->
<template>
	<div>
		{{ countStore.num }}
	</div>
</template>
```

---
_Source: https://npm.io/package/sharem · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._