# vue-use-store

> listen dom size change

Latest version **0.0.5** (published 2023-10-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-use-store
pnpm add vue-use-store
yarn add vue-use-store
bun add vue-use-store
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-10-10 |
| First published | 2023-10-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | ldr_l |

## Links

- npm: https://www.npmjs.com/package/vue-use-store
- Repository: https://github.com/ldongrui/vue-use-store
- Homepage: https://github.com/ldongrui/vue-use-store#readme
- Issues: https://github.com/ldongrui/vue-use-store/issues
- npm.io page: https://npm.io/package/vue-use-store

## Recent versions

- 0.0.5 (latest) — 2023-10-10
- 0.0.4 — 2023-10-10
- 0.0.3 — 2023-10-10
- 0.0.2 — 2023-10-10
- 0.0.1 — 2023-10-10

## README

#### 下载：npm i vue-use-store



## 1、useStorageUpdate: 用于vue中监听storage数据变化

### 用法：

##### 	1、main.js中引入，use的时候传入配置项，选择你要加监听的storage

```js
import { useStorageUpdate } from 'vue-use-store'

app.use(useStorageUpdate, {
    options:["localStorage", "sessionStorage"]
})
```

##### 	2、在组件中使用

```js
import { useStorageUpdate } from 'vue-use-store'

//监听，target是要监听的storage， key是要监听的storage中的某一项键名
useStorageUpdate({
    target: "localStorage",
    key: "name"
}, (newValue, oldValue) => {
    console.log(newValue, oldValue)
})
```



## 2.useResize: 用于vue中监听元素宽高变化

##### 	1、main.js中引入，use注册完即可使用 v-resize指令

```js
import { useResize } from 'vue-use-store'

app.use(useResize)
```

##### 	2、在组件中使用

```js
import { useResize } from 'vue-use-store'

useStorageUpdate(el, target=>{
    console.log(target)//当前元素的宽高等信息
})
```



## 3.useFullScreen: 用于全屏某个元素块

##### 	1、main.js中引入，use注册完即可使用 v-full-screen指令（参数是id名，请保证id在当前页面中是唯一的，否则有可能会错乱）指令传的参数代表的是要全屏的元素id

```js
import { useFullScreen } from 'vue-use-store'

app.use(useFullScreen)
```

##### 	2、在组件中使用

```js
import { useFullScreen } from 'vue-use-store'

//el->要全屏的元素， target会返回出来一个close函数，调用即可退出全屏
const target = useStorageUpdate(el)

//用指令的情况下，再次点击会退出全屏
<div v-full-screen>全屏</div>
```

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