时间戳

首页 > 解决方案 > 用于在组件之间来回切换的 Svelte 自定义存储

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

问题描述

我在 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()

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

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

标签： javascriptsveltesvelte-3svelte-componentsvelte-store

解决方案

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

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

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

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

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

推荐阅读