Svelte如何初始化数组store并在script代码段中访问其值

1. 现有初始化方式是否正确 #

你当前初始化readable store的代码没有语法错误，之所以在script代码段中不能直接用和模板一样的$columns取值，是因为Svelte的$ store语法糖仅在两个场景生效：

• Svelte组件的模板区域
• Svelte组件<script>块的顶层响应式代码（比如$:开头的响应式声明语句）
  普通的同步函数、回调、非响应式上下文里不能直接使用$语法糖。

2. 在script中访问store值的方法 #

有两种常用实现方式：

方法1：在响应式上下文直接用$语法 #

如果是组件顶层的响应式逻辑，可以直接使用$语法糖：

// 组件<script>块顶层
$: {
  // 可以直接遍历取值
  $columns.forEach(col => console.log(col))
}

方法2：用get工具函数一次性取值 #

如果是在普通函数、回调等非响应式上下文，可以用Svelte内置的get方法获取store的当前值：

import { get } from 'svelte/store';
import { columns } from './你的store文件路径.js';

function yourFunction() {
  // 一次性获取当前store的值
  const columnList = get(columns);
  // 直接遍历即可
  columnList.forEach(col => {
    // 你的业务逻辑
  })
}

3. 全局不可变共享数组的更优实现 #

如果你这个数组的值完全不需要后续修改、也不需要响应式更新通知所有使用的组件，用readable store属于冗余实现，更轻量的方案是直接导出冻结的常量数组：

// 常量文件比如src/constants.js
export const columns = Object.freeze(['id', 'postId', 'name', 'email', 'body']);

这种实现不需要依赖store的订阅逻辑，所有模块导入的都是同一个不可变的数组实例，不管是script代码还是模板都可以直接导入使用：

<script>
import { columns } from './constants.js';

// script里直接遍历
columns.forEach(col => console.log(col))
</script>

<!-- 模板里也可以直接遍历 -->
{#each columns as col}
  <span>{col}</span>
{/each}

只有当你后续需要修改这个数组的值、并且要求所有用到的组件自动响应变化时，才需要使用store的实现方案。

内容的提问来源于stack exchange，提问作者JSNinja