Svelte / Sapper - 无法从不同路线的 api 响应中保存数据答案

【问题标题】：Svelte / Sapper - Unable to save data from api response on different routeSvelte / Sapper - 无法从不同路线的 api 响应中保存数据
【发布时间】：2020-06-29 05:20:37
【问题描述】：

我一直在尝试在 svelte 中创建一个身份验证系统，并且注册是一个多步骤过程，因此需要保存步骤 1 的 api 响应并传递，每一步都是不同的路线。遇到store in苗条，但不知何故，它只是在使用 get 获取数据时返回 undefined 。下面是返回相同输出的演示代码。

index.svelte

<script>
import signUpStore from "./hobby-store.js";
let data = {
    name: "Rahul",
    age: "something"
};
signUpStore.setSignUp(data);

//   let result = signUpStore.getSignUp();
//   console.log(result); //undefined
</script>

<p>
<strong>
    Try editing this file (src/routes/index.svelte) to test live reloading.
</strong>
</p>

关于.svelte

<script>
import signUpStore from "./hobby-store.js";
import { onMount } from "svelte";
let result = signUpStore.getSignUp();
console.log("server side : ", result); //undefined

onMount(() => {
    console.log("client side : ", result); // undefined
});
</script>

<p>This is the 'about' page. There's not much here.</p>

hobby-store.js

import {
    writable,
    get
} from 'svelte/store'

const signUp = writable()

const signUpStore = {
    subscribe: signUp.subscribe,
    setSignUp: (items) => {
        signUp.set(items)
        // console.log('items : ', items, signUp)
    },
    addSignUp: (data) => {
        signUp.update(items => {
            return items.concat(data)
        })
    },
    getSignUp: () => {
        get(signUp)
    }
}

export default signUpStore;

只需将此数据保存在会话或 svelte 或 sapper 提供的任何持久存储中，并在成功操作时将其重置。

【问题讨论】：

您的日志不是响应式的，并且您的初始可写存储值 = 未定义。
嗨，我是新来的苗条，你能帮我在不同的路线之间做数据反应吗

标签： javascript svelte sapper svelte-3

【解决方案1】：

以下带有日志记录的示例 session.js 存储：

import { writable } from 'svelte/store';
import { deepClone } from './../utilities/deepClone.js';

const newSession = {
  a; 0, b: 0, x: 0
};

function sessionStore() {

  const { subscribe, set, update } = writable(deepClone(newSession));
  let logging = false;

  return {
    subscribe,  // $session...
    update: (obj) => {
      update(o => { // session.update({a:1, b:2});
        const merged = Object.assign(o, obj);
        if (logging) console.log('session update', merged);
        return merged;
      });
    },
    set: (key, value) => { // session.set('x', 9)
      update(o => {
      const merged = Object.assign(o, {[key]: value});
      if (logging) console.log('session set', merged);
      return merged;
    });
    },
    reset: () => {  // session.reset()
      set(deepClone(newSession));
    },
    set log(bool) {  // setter: session.log = true;
      logging = bool === true;
    }
  };
};
export const session = sessionStore();

Example.svelte

<script>
  import { session } from './session.js';

  session.log = true;
  $: console.log('reactive log', $session);
  session.set('x', 10);
  session.reset();

<script>

【讨论】：