veract
v1.0.6
Published
一种全局状态管理方案
Downloads
3
Readme
veact
一种全局状态管理方案
在 react 中使用 vue 的响应式 API
作者:张玉儒
Installation
$ npm install veract
$ yarn add veract
API
reactive
使用 reactive 创建的数据,将具备
响应式
能力,在 effect 组件中,当数据变化时,就会触发组件更新接收参数必须是对象,如果你需要传递原始值,请使用
ref
注意:直接解构响应式数据,会导致其丢失响应!如果你需要解构,请使用toRef/toRefs
import { reactive } from "veract";
const store = reactive({
name: "张三",
age: 18,
friends: [
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
],
});
effect
使用该函数创建的
react组件
(函数组件或者类组件),将返回一个effect组件
effect组件
中,使用到的响应式
数据变化时,会触发组件更新注意:只有
effect组件
,才具备监测响应式
数据的能力
import { effect } from "veract";
const Child = effect(() => {
return (
<div>
<div>姓名:{store.name}</div>
<div>年龄:{store.age}</div>
</div>
);
});
ref
创建一个 ref 对象,
该对象并不是react的ref对象
,同样具备响应式能力默认接收原始值,但你也可以传递对象(如果是对象,将以 reactive 处理)
使用方式和 vue 保持一致!
import { ref } from "veract";
const state = ref(false);
const store = ref({
name: "张三",
age: 18,
friends: [
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
],
});
toRef
用于从一个响应式对象中,取出某个属性,该操作不会丢失代理
取出的属性,是一个 ref 对象,其属性值存放在 value 属性上
import { reactive, toRef, effect } from "veract";
const store = reactive({ name: "张三" });
const Child = effect(() => {
const name = toRef(store, "name");
return <div>姓名:{name.value}</div>;
});
toRefs
toRef 有局限性,一次只能解构一个属性
toRefs 是 toRef 的增强,能将整个响应式对象全部转换,解构后也不会丢失代理
import { reactive, toRefs, effect } from "veract";
const store = reactive({
name: "张三",
age: 18,
friends: [
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
],
});
const Child = effect(() => {
const { name, age } = toRefs(store);
return (
<div>
<div>姓名:{name.value}</div>
<div>年龄:{age.value}</div>
</div>
);
});
isReactive
查看某个数据是否被 reactive 代理过
import { reactive, isReactive } from "veract";
const store = reactive({
name: "张三",
age: 18,
friends: [
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
],
});
let obj = { a: 1 };
console.log(isReactive(store)); // true
console.log(isReactive(obj)); // false
isRef
查看某个数据是否被 ref 劫持过
import { ref, isRef } from "veract";
const state = ref(false);
console.log(isRef(state)); // true
toRaw
获取一个响应式数据的 原始数据(变为响应式数据之前的数据)
import { reactive, toRaw } from "veract";
const store = reactive({
name: "张三",
age: 18,
});
const store1 = toRaw(store);
console.log("toRaw", store1); // 未代理
markRaw
创建一个永远无法变成响应式的对象[静态对象]
如果你想做性能提升,不希望代理对象中的 某个不会变化的属性被代理,就可以使用该方法
import { reactive, markRaw } from "veract";
const store = reactive({
name: "张三",
age: 18,
// 我不希望 friends 被代理,张三永远只有两个朋友
friends: markRaw([
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
]),
});
console.log(store); // friends不会被劫持
toReactive
当你用 toRef/toRefs 把某个属性解构出来时,如果这个属性是对象,那么你使用它的时候,就需要.value.xxx 才能访问里面的内容 toReactive 可将结构出的 ref 类型数据,再次转换为 reactive 类型数据,此后操作就无需.value
import { reactive, toRefs, toReactive } from "veract";
const store2 = reactive({
a: 1,
b: {
id: 111,
title: "哈哈",
},
});
let { b } = toRefs(store2);
console.log(b);
b = toReactive(b.value);
console.log(b);