javascript 如何在Sveltekit中编辑一个全局变量并将其传递到多个页面?

1mrurvl1  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(235)

在登陆页面上,用户将输入他们正在寻找的狗品种。提交后,该值将被全局保存,该品种的名称将被传递到新的路线。我尝试使用商店更新和调用该值,但迄今为止没有运气。
Store.js

import { writable } from "svelte/store";

const dog = writable("");

export default dog;

+page.svelte(登录页面)

<script>
  let dog_val = "" 
  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(dog_val);
    dog.set(dog_val)
   window.location.href = "/dog"
  }
</script>

<main>
  <input bind:value={dog_val} placeholder="Search for a dog breed" />
  <button on:click={(e) => handleSubmit(e)}>Search This Breed</button>
</main>

+页面.svelte(狗页面)

<script>
   let dog_val = "";
   dog.subscribe(prev_val => {dog_val = prev_val})
</script>

<main>
  <h1>{dog_val}</h1>
</main>
w8f9ii69

w8f9ii691#

添加此行

import dog from 'path-to-dog.js';

要使用从文件导出的值/函数,必须先导入该文件。
因此,在+page.svelte中的script标记后的第一行中添加以下代码行:

<script>
  import dog from 'path-to-dog.js';
  // the rest of the code...
</script>
b1zrtrql

b1zrtrql2#

import dog from './Store.js';添加到您正在使用商店的页面上每个<script>的顶部。

相关问题