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

Question

我通过创建简单的应用程序来学习 Svelte。
逻辑是使用类编写的。这个想法是，所需的所有数据都来自类实例属性。实例不应被多次实例化。我正在使用商店来提供此实例的组件。
问题是我无法使用这种方法获得 react 。我尝试了可读可写存储，但没有任何帮助。仍然可以使用 OOP 获得 react 性，我该怎么办？重新分配和创建新实例会很昂贵。
编辑
我无法在 REPL 中编写示例，因为类太大。
解析器.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 ... }

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

Answer 1

简答
据我所知，你不能这样做，这种方式。
更长的答案
根据某些因素(如偏好、现有库等)，可能会有一些解决方法。
解决方案1:在类中使用stores
第一个也是最直接的一个是在类本身中使用存储:
解析器.js

import { writable } from 'svelte/store'

class Parser {
  constructor() {
    this._history = writable([])
  }

  parse(string) {
        console.log(string)
    this._history.update(v => [...v, string])
  }

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

parserStore.js

import { Parser } from './Parser.js'¨

export const parser = new Parser()

Component1.svelte

<script>
    import { parser } from './parserStore.js';

    let value
    let { history } = parser
    
    $: parser.parse(value);
</script>

<input bind:value />

{#each $history as h}<p>{h}</p>{/each}

注意只有 history这个类的一部分将是一个商店。
解决方案 2:使用自定义存储重写
这种方法本质上与前一种方法非常接近，但在 Svelte 社区中更为常见。从技术上讲，它只是将构建包装在商店中以获得一些额外的功能。
parserStore.js

import { writable } from 'svelte/store'

export const parser = (() => {
    const P = writable([])  
    const { set, subscribe, update } = P    
    
    function parse(string) {
        P.update(arr => [...arr, string])
    }
    
    return {
        parse,
        subscribe
    }
})()

Component1.svelte

<script>
    import { parser } from './parserStore.js';

    let value
    $: parser.parse(value)
</script>

<input bind:value />

{#each $parser as h}<p>{h}</p>{/each}

注意这里没有 history属性了，你直接迭代 parser ，如果您仍然想要历史属性，则必须稍微调整代码:
parserStore.js

  ...
  return {
    parse,
    history: { subscribe }
  }

Component1.svelte

<script>
  ...
  const { history } = parser
  ...
</script>

{#each $history as h}<p>{h}</p>{/each}