使用商店在 Svelte 中使类实例具有反应性

我通过创建简单的应用程序来学习 Svelte。

逻辑是使用类编写的。这个想法是,所需的所有数据都来自类实例属性。实例不应被多次实例化。我正在使用商店来提供此实例的组件。

问题是我无法使用这种方法获得反应。我尝试了可读可写存储,但没有任何帮助。仍然可以使用 OOP 获得反应性,我该怎么办?重新分配和创建新实例会很昂贵。

编辑

我无法在 REPL 中编写示例,因为类太大。

Parser.js

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

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

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

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

parserStore.js

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

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

在这个组件中,我得到了实例并反应性地使用了一个方法。

Component_1.svelte *

import { parserStore } from "parserStore.js";

$: result = parserStore.parse(binded_input_value);

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

Component_2.svelte

import { parserStore } from "parserStore.js";

$: history = parserStore.history;

{#each history as ... }

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

stack overflow Making class instance reactive in Svelte using stores
原文答案

答案:

作者头像

对自己的注意:
这似乎是一个更复杂的例子,带有类和自定义存储(!):

https://gist.github.com/3lpsy/55da83779a50f603a78ae8331e360a37

有趣的:

/*
I recently jumped into svelte programming and wanted to create a class/singleton that could double as a reactive writable store. 
I did things very wrong until people on the discord confirmed how wrong my implementation was so I wanted to provide a simple example.
So below is a simple account store you can use. I'm not sure if it's optimal or even correct, but it's better than my first attempt. 
Feel free to provide feedback.
*/
...

编辑,
和这个:

6.7 使用带有类的商店

https://livebook.manning.com/book/svelte-and-sapper-in-action/chapter-6/v-5/106
来自曼宁关于 Svelte 的书。
链接中的代码部分是可见的,您只需创建一个新帐户即可免费获得整章(如果出现弹出窗口)。

潜水员:
https://devlinduldulao.pro/svelte-in-a-nutshell-with-store-code-sample/ https://medium.com/geekculture/svelte-stores-352c61759a88