Как инициализировать хранилище массивов в Svelte?

#svelte

Вопрос:

Я попытался инициализировать массив, который я хотел бы получить из разных модулей.

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

Я могу успешно просматривать этот магазин в разделах html, подобных этому.

 {#each $columns as col}  

Однако я не могу перебирать значения в разделах скрипта. Как получить доступ к значениям? Был ли это неправильный способ инициализации общего массива? Есть ли лучший способ настроить общий массив, доступный из любого места и не изменяющийся?

Ответ №1:

В разделе «Сценарий» компонента «Стройный» вы можете просто использовать $columns.forEach(...) для перебора массива.

Тем не менее, если этот массив никогда не изменяется и фиксируется в самом коде (например, вы уже заранее знаете значения), вам не нужны (минимальные) накладные расходы магазина, но вы можете просто сделать

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

Это freeze предотвращает постоянное изменение массива.

Ответ №2:

Существует два способа доступа к значению (и впоследствии их дочерним элементам) из svelte хранилища в зависимости от контекста, в котором выполняется ваш сценарий:

  1. В .svelte файле
  2. Вне .svelte файла (например, a .js или .ts файл)

Примечание: Как указал Стефан Ванраес в своем ответе, его рекомендуется использовать Object.freeze , если вы больше нигде не изменяете содержимое своего массива, так как его размещение в вашем readable только предотвратит изменение ссылки, а не ее содержимого.

1. В .svelte файле

Здесь вы можете добавить $ в начало переменных хранилища, чтобы получить доступ к их значениям (и впоследствии к их дочерним).:

 lt;scriptgt;  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' lt;/scriptgt;  

2. Вне .svelte файла

Здесь вы можете использовать экспортированный get метод из svelte/store :

 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'