用于在组件之间来回切换的 Svelte 自定义存储

Question

我在 Svelte 做一个 SPA，想知道是否可以创建一个自定义存储来在组件之间来回切换。

这是一个工作示例，我使用字符串数组来展示方法。 https://svelte.dev/repl/1f9e72105e8d45e0bd6df61b304fd257?version=3.31.0

import { writable } from 'svelte/store'

function create_navigation() {
  const screens = ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5']
  const { subscribe, set } = writable(screens[0])
  let n = 0
  
  return {
    subscribe,
    next: () => (n < screens.length - 1 && n++, set(screens[n])),
    prev: () => (n > 0 && n--, set(screens[n])),
    reset: () => set(screens[0])
    }
}

export const screen = create_navigation()

如果我们将一些组件导入我的store 并创建一个组件数组，它将不会呈现。可能我错过了一些概念，所以任何帮助都会非常感激:)

现在，为了解决这个问题，我使用 store 中的数字，然后在 App.svelte 中设置组件数组。

Answer 1

您可以创建一个组件数组，而不是字符串数组，例如：

import { writable } from 'svelte/store'
import Screen1 from './Screen1.svelte'
import Screen2 from './Screen2.svelte'

function create_navigation() {
  const screens = [Screen1, Screen2]
.
.
.

并在您的App.svelte 组件中使用<svelte:component this={$screen}/>。

示例：https://svelte.dev/repl/5752ba81b6c94b80b31131c02431e8ac?version=3.31.0