Javascript 使用存储使类实例在苗条中反应

我通过创建简单的应用程序来学习苗条

逻辑是使用类编写的。其思想是，所有需要的数据都来自类实例属性。实例不应实例化多次。我正在使用存储来提供此实例的组件

问题是我不能用这种方法得到反应性。我尝试了可读写的存储，但没有任何帮助。使用OOP仍然可以获得反应性，我能做什么？重新分配和创建新实例将非常昂贵

编辑

我无法在REPL中编出这个例子，因为类太大了

Parser.js

在这里，我将实例传递给商店

parserStore.js

在这个组件中，我得到了实例并使用了一个方法

组件1.苗条*

我想要得到的是使用类方法更新的最新历史记录属性：

组件2.苗条

---

我知道，这不是最好的例子，但我想要的是通过商店提供的反应类实例。实际上，这些值是最新的，但不会导致组件的重新渲染。安装组件时—最新的数据，但在没有重新呈现之后，即使实例的属性发生了更改。

简短回答

据我所知，你不能这样做

更长的答案

根据某些因素（如偏好、现有库等），可能会有解决方法

解决方案1：使用类中的存储

第一个也是最简单的方法是在类本身中使用存储：

Parser.js

从'svelte/store'导入{writable}
类解析器{
构造函数（）{
此。_history=可写（[]）
}
解析（字符串）{
console.log（字符串）
此.u history.update（v=>[…v，字符串]）
}
获取历史（）{
返回此。\u历史记录；
}
}

parserStore.js

import{Parser}from./Parser.js'>
export const parser=new parser（）

成分1.苗条

从'./parserStore.js'导入{parser}；
让值
设{history}=解析器
$：parser.parse（值）；
{#每个$history as h}{h}
{/each}

请注意，这个类中只有

历史

部分是存储区

解决方案2：使用自定义存储重写

从本质上讲，这种方法与前一种方法非常接近，但在苗条社区中更为常见。从技术上讲，它只是包装了内置商店，以获得一些额外的功能

parserStore.js

从'svelte/store'导入{writable}
导出常量解析器=（（）=>{
常量P=可写（[]））
常量{set，subscribe，update}=P
函数解析（字符串）{
P.update（arr=>[…arr，string]）
}
返回{
作语法分析
订阅
}
})()

成分1.苗条

从'./parserStore.js'导入{parser}；
让值
$：parser.parse（值）
{#每个$parser作为h}{h}
{/each}

请注意，这里不再有

历史

属性，您可以直接在

解析器

上迭代，如果您仍然需要历史属性，则必须稍微调整代码：

parserStore.js

。。。
返回{
作语法分析
历史记录：{订阅}
}

成分1.苗条

...
const{history}=解析器
...
{#每个$history as h}{h}
{/each}

还有另一种方法可以向类本身添加可写的。添加

save（）

方法：

Parser.js

导出默认类解析器{
构造函数（）{
这个。_历史=[]；
}
解析（字符串）{
此.\u历史记录.推送（字符串）
}
获取历史（）{
返回此。\u历史记录；
}
保存（）{
归还这个；
}
}

成分1.苗条

从“Parser.js”导入{Parser}；
从“svelte/store”导入可写文件；
//创建新的类实例
const p=new Parser（）；
//添加一些值
p、 解析（绑定的输入值）；
//保存该类实例
const parserStore=可写（p.save（））；
//可以在页面加载后调用
函数showHistory（）{
log（get（parserStore.history）；
}

加载页面后，您可以保留该值，您可以将

p.save（）

传递给子组件，或者如果组件2不是子组件，您可以使用

setContext（）

和

getContext（）

---

关键是要在任何给定时刻保存类的状态…

我们需要看看您做了什么。在这里或在一个小巧的REPL上显示您的代码。@AndreasDolk我试图提供一些示例，希望对您有所帮助！哦，我明白了。非常感谢。我想，我会使用“存储作为类的一部分”的方法。我没想到，哇！现在，你如何在你的类中获得

这个。_history

或

P

，因为它是一种可写类型，而不是你在某个时间点的实际值。。。？

export default class Parser {
  constructor() {
    this._history = [];
  }

  parse(string) {
    this._history.push(string)
  }

  get history() {
    return this._history;
  }
}

import writable from "svelte/store";
import Parser from "Parser.js"

export const parserStore = writable(new Parser());

import { parserStore } from "parserStore.js";

$: result = parserStore.parse(binded_input_value);

import { parserStore } from "parserStore.js";

$: history = parserStore.history;

{#each history as ... }