Пользовательский магазин Svelte для перехода назад и вперед между компонентами
Я делаю SPA в Svelte и хотел бы знать, возможно ли создать собственное хранилище для перехода назад и вперед между компонентами.
Это рабочий пример, в котором я использую массив строк, чтобы показать подход. 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 устанавливаю свой массив компонентов.
да ^^ что-то вроде const screens = [Component_A, Component_B, Component_C]
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете создать массив компонентов вместо массива строк, например:
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
Большое спасибо, это было то, что я сделал сначала, но, вероятно, я пропустил это, изменив больше вещей, которые должен был. Благодаря вашей ясности он обрел смысл и теперь работает! Прямо в точку ^^
Вы говорите, что хотите, чтобы каждый элемент в массиве был отдельным компонентом, а не строками, как в вашем примере?