【问题标题】:How to initialize an array store in Svelte?如何在 Svelte 中初始化数组存储?
【发布时间】:2021-10-27 16:16:12
【问题描述】:

我尝试初始化一个我希望从不同模块访问的数组。

export const columns = readable(['id', 'postId', 'name', 'email', 'body']);

我可以像这样在 html 部分中成功地遍历该商店。

{#each $columns as col}

但是我无法遍历脚本部分中的值。如何访问这些值?这是初始化共享数组的错误方法吗?有没有更好的方法来设置一个可以从任何地方访问并且不会更改的共享数组?

【问题讨论】:

    标签: svelte


    【解决方案1】:

    在 Svelte 组件的脚本部分,您可以简单地使用 $columns.forEach(...) 循环遍历您的数组。

    也就是说,如果这个数组 从不 更改并在代码本身中固定(例如:您事先已经知道值),那么您不需要存储的(最小)开销,但是你可以简单地做

    export const columns = ['id', 'postId', 'name', 'email', 'body'];
    Object.freeze(columns);
    

    freeze 防止数组发生变化。

    【讨论】:

      【解决方案2】:

      根据运行脚本的上下文,有两种方法可以从 svelte 存储中访问值(以及随后的子值):

      1. .svelte 文件中
      2. .svelte 文件之外(例如.js.ts 文件)

      旁注:正如 Stephane Vanraes 在他们的回答中指出的那样,如果您没有在其他任何地方修改数组的内容,建议使用 Object.freeze,因为将其放入您的 readable 只会阻止引用从改变而不是它的内容。

      1。在.svelte 文件中

      在这里,您可以在存储变量前面添加 $ 以访问它们的值(以及随后的子值):

      <script>
        import { readable } from 'svelte/store';
        const columns = readable(
          Object.freeze(
            ['id', 'postId', 'name', 'email', 'body'],
          ),
        );
      
        console.log($columns); //  ['id', 'postId', 'name', 'email', 'body']
        console.log($columns[0]);  // 'id'
      </script>
      

      2。在.svelte 文件之外

      在这里,您可以使用从svelte/store 导出的get 方法:

      import { get, readable } from 'svelte/store';
      const columns = readable(
        Object.freeze(
          ['id', 'postId', 'name', 'email', 'body'],
        ),
      );
      
      console.log(get(columns)); // ['id', 'postId', 'name', 'email', 'body']
      console.log(get(columns[0])); // 'id'
      

      【讨论】:

        猜你喜欢
        • 2019-10-31
        • 1970-01-01
        • 2010-10-03
        • 1970-01-01
        • 2021-11-28
        • 1970-01-01
        • 2017-05-11
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多