[英]Svelte / Sapper - Unable to save data from api response on different route
I have been trying to create a authentication system in svelte , and signup is a multi-step process so need to save api response from step 1 and pass along , each step is a different route .Have came across store
in svelte but somehow it just return undefined
when fetching the data using get
.我一直在尝试在 svelte 中创建一个身份验证系统,并且注册是一个多步骤过程,因此需要保存第 1 步中的 api 响应并继续传递,每个步骤都是不同的路线。在 svelte 中遇到过
store
,但不知何故它只是使用get
获取数据时返回undefined
。 Below is the demo code which returns the same ouput.下面是返回相同输出的演示代码。
index.svelte 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>
About.svelte关于.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爱好商店.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;
Just need to save this data in session or any persistent storage that svelte or sapper provides and reset it on successfull action.只需要将此数据保存在会话或 svelte 或 sapper 提供的任何持久存储中,并在成功操作时重置它。
Example session.js store below with logging:示例 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例子.svelte
<script>
import { session } from './session.js';
session.log = true;
$: console.log('reactive log', $session);
session.set('x', 10);
session.reset();
<script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.