开始使用
介绍
如果你的项目中需要使用会话存储（localStorage 或 sessionStorage）来保存数据，且希望这些数据在页面刷新后依然能保留，并且能够在数据变化时自动更新界面，那么 ew-responsive-store 是完美的解决方案。
它的体积不到 1 KB，简单易用，只需要调用一个方法就能将会话存储的数据变成响应式数据，可以广泛应用于各种框架的项目中，甚至是原生 JavaScript 项目，该库还具备完善的单元测试和类型推导。
安装
首先，你需要安装 ew-responsive-store 包。可以通过以下命令安装：
1npm install ew-responsive-store
2# 或者使用 pnpm
3pnpm add ew-responsive-store
4# 或者使用 yarn
5yarn add ew-responsive-store
框架依赖
自 v0.0.3 起，ew-responsive-store 支持多个框架。你只需要安装你正在使用的框架：
1# React
2npm install react
3
4# Vue
5npm install @vue/reactivity @vue/shared
6
7# Preact
8npm install preact
9
10# Solid
11npm install solid-js
12
13# Svelte
14npm install svelte
15
16# Angular
17npm install @angular/core
注意：框架依赖作为外部依赖处理，因此不会打包到你的应用中，保持库的体积最小。
框架专用导入
自 v0.0.3 起，你应该从框架专用入口点导入：
1// Vue
2import { useStorage } from 'ew-responsive-store/vue';
3
4// React
5import { useStorage } from 'ew-responsive-store/react';
6
7// Preact
8import { useStorage } from 'ew-responsive-store/preact';
9
10// Solid
11import { useStorage } from 'ew-responsive-store/solid';
12
13// Svelte
14import { useStorage } from 'ew-responsive-store/svelte';
15
16// Angular
17import { useStorage } from 'ew-responsive-store/angular';
18
19// 原生 JavaScript
20import { useStorage } from 'ew-responsive-store/vanilla';
21// 或者
22import { useStorage } from 'ew-responsive-store';
基本使用
ew-responsive-store 包的核心导出了两个方法：parseStr 和 useStorage。其中，useStorage 用于将会话存储的数据变为响应式数据。
基本值
你可以使用 useStorage 来实现基本值的响应式。例如，假设你有一个计数器，存储在 localStorage 中：
1import { useStorage } from "ew-responsive-store/vue";
2
3// 初始化 count，默认值为 0
4const count = useStorage("count", 0);
5
6// 修改 count
7count.value++; // count 值变为 1
Vue 模板代码：
1<template>
2 <p>{{ count }}</p>
3 <button @click="count++">点击我</button>
4</template>
5
6<script setup>
7import { useStorage } from "ew-responsive-store/vue";
8
9const count = useStorage("count", 0);
10</script>
此时，count 的值会保存在浏览器的会话存储中，并且它是响应式的，即页面刷新后 count 依然保留并且视图会自动更新。
对象值
同样地，你可以将对象存储为响应式数据：
1import { useStorage } from "ew-responsive-store/vue";
2
3// 初始化 userInfo 对象
4const userInfo = useStorage("user", { name: "eveningwater" });
5
6// 修改 userInfo 对象
7userInfo.value.name = "夕水"; // userInfo 的 name 属性变为 '夕水'
当修改 userInfo 的 name 属性时，视图会自动更新，并且数据会保存在会话存储中。
数组值
你还可以存储数组，并且它也是响应式的：
1import { useStorage } from "ew-responsive-store/vue";
2
3// 初始化一个数组
4const countList = useStorage("countList", [1, 2, 3]);
5
6// 修改数组
7countList.value.push(4); // 数组变为 [1, 2, 3, 4]
有关更高级的用法和配置选项，请查看 API 参考 部分。
