Svelte 商店功能更新
Svelte store function update
Svlete 商店文档显示字符串或整数正在更新,但我没有在商店中找到任何动态函数。
我不明白如何将 getData 函数设置为可写函数以便将更改通知 html。
在下面的示例中,我希望在调用 updateKey 函数后显示 'b'。
您将在此处找到 REPL 中的最小代码:https://svelte.dev/repl/3c86bd48d5b5428daee514765c926e58?version=3.29.7
这里使用相同的代码以防 REPL 出现故障:
App.svelte:
<script>
import { getData } from './store.js';
import { updateKey } from './store.js';
setTimeout(updateKey, 1000);
</script>
<h1>{getData()}!</h1>
store.js
import {setContext} from 'svelte';
import {writable} from 'svelte/store';
var data = {
'a': 'a',
'b': 'b'
};
var key = 'a';
export const getData = function() {
return data[key];
}
export const updateKey = () => {
key = 'b';
}
目标是在商店中使用动态功能。
感谢阅读。
好吧,我认为您对 Svelte 中的工作方式仍然有些困惑...不确定如何最好地回答您的问题,所以这里有一些代码可以说明您想要实现的目标,以及一些注释。我希望它能帮助您更好地了解商店是如何组合在一起的。
App.svelte
<script>
import { onMount } from 'svelte'
import { key, data, updateKey } from './store.js'
onMount(() => {
// it's not safe to have an unchecked timer running -- problems would
// occur if the component is destroyed before the timeout has ellapsed,
// that's why we're using the `onMount` lifecycle function and its
// cleanup function here
const timeout = setTimeout(updateKey, 1000);
// this cleanup function is called when the component is destroyed
return () => {
clearTimeout(timeout)
}
})
// this will log the value of the `key` store each time it changes, using
// a reactive expression (a Sveltism)
$: console.log($key)
</script>
<!--
NOTE: we're using the $ prefix notation to access _the value_ of the store,
and not `data`, which would be _the store itself_ (an object with
subscribe, set, etc.)
-->
<h1>{$data}</h1>
store.js
import { writable, derived } from 'svelte/store'
const db = {
'a': 'a',
'b': 'b'
}
// a writable store with initial value 'a'
export const key = writable('a')
export const updateKey = () => {
// a writable store has a `set` method to change its value
key.set('b')
}
// you can use a derived store to compute derived values from
// the current value of other stores
//
// here, we're getting the value from the db when the value of
// the `key` store changes
export const data = derived([key], ([$key]) => db[$key])
如果我正确理解了你的问题,你希望能够更改由 getData()
执行的功能(逻辑)并且你希望在每个功能上更改 html 以进行更新
对于此用例,您需要创建自己的自定义商店
如下store.js
import { writable } from 'svelte/store';
// an object to hold our functions
const functions = {
"funcA": () => {
// do something
return "whatevedata for a"
},
"funcB": () => {
// do something
return "the data of b"
}
}
// this how to create a custom store, taken from svelte documentation
function createCustomStore(defaultValue) {
const { subscribe, set, update } = writable(defaultValue);
return {
subscribe,
//custom function change func where suppliedValue the value you input to the store
// set() is a default function for a store to change it's value
changeFunc: (suppliedValue) => set(functions[suppliedValue]),
reset: () => set(defaultValue)
};
}
export const getData = createCustomStore(() => "default");
export const updateKey = () => {
// this to update which function the store uses
getData.changeFunc("funcB")
}
在App.svelte
<script>
import { getData } from './store.js';
import { updateKey } from './store.js';
setTimeout(function() {
updateKey()
}, 1000);
</script>
<h1>{$getData()}</h1>
我们将 $
添加到 getData
,因为它是一个保存函数引用的存储,而 ()
用于执行 getData
存储引用的任何函数。因为它是 getData
的每个值更改(函数更改)的存储,所以 html 将被更新
这里是一个repl的实现
Svlete 商店文档显示字符串或整数正在更新,但我没有在商店中找到任何动态函数。
我不明白如何将 getData 函数设置为可写函数以便将更改通知 html。
在下面的示例中,我希望在调用 updateKey 函数后显示 'b'。
您将在此处找到 REPL 中的最小代码:https://svelte.dev/repl/3c86bd48d5b5428daee514765c926e58?version=3.29.7
这里使用相同的代码以防 REPL 出现故障:
App.svelte:
<script>
import { getData } from './store.js';
import { updateKey } from './store.js';
setTimeout(updateKey, 1000);
</script>
<h1>{getData()}!</h1>
store.js
import {setContext} from 'svelte';
import {writable} from 'svelte/store';
var data = {
'a': 'a',
'b': 'b'
};
var key = 'a';
export const getData = function() {
return data[key];
}
export const updateKey = () => {
key = 'b';
}
目标是在商店中使用动态功能。
感谢阅读。
好吧,我认为您对 Svelte 中的工作方式仍然有些困惑...不确定如何最好地回答您的问题,所以这里有一些代码可以说明您想要实现的目标,以及一些注释。我希望它能帮助您更好地了解商店是如何组合在一起的。
App.svelte
<script>
import { onMount } from 'svelte'
import { key, data, updateKey } from './store.js'
onMount(() => {
// it's not safe to have an unchecked timer running -- problems would
// occur if the component is destroyed before the timeout has ellapsed,
// that's why we're using the `onMount` lifecycle function and its
// cleanup function here
const timeout = setTimeout(updateKey, 1000);
// this cleanup function is called when the component is destroyed
return () => {
clearTimeout(timeout)
}
})
// this will log the value of the `key` store each time it changes, using
// a reactive expression (a Sveltism)
$: console.log($key)
</script>
<!--
NOTE: we're using the $ prefix notation to access _the value_ of the store,
and not `data`, which would be _the store itself_ (an object with
subscribe, set, etc.)
-->
<h1>{$data}</h1>
store.js
import { writable, derived } from 'svelte/store'
const db = {
'a': 'a',
'b': 'b'
}
// a writable store with initial value 'a'
export const key = writable('a')
export const updateKey = () => {
// a writable store has a `set` method to change its value
key.set('b')
}
// you can use a derived store to compute derived values from
// the current value of other stores
//
// here, we're getting the value from the db when the value of
// the `key` store changes
export const data = derived([key], ([$key]) => db[$key])
如果我正确理解了你的问题,你希望能够更改由 getData()
执行的功能(逻辑)并且你希望在每个功能上更改 html 以进行更新
对于此用例,您需要创建自己的自定义商店
如下store.js
import { writable } from 'svelte/store';
// an object to hold our functions
const functions = {
"funcA": () => {
// do something
return "whatevedata for a"
},
"funcB": () => {
// do something
return "the data of b"
}
}
// this how to create a custom store, taken from svelte documentation
function createCustomStore(defaultValue) {
const { subscribe, set, update } = writable(defaultValue);
return {
subscribe,
//custom function change func where suppliedValue the value you input to the store
// set() is a default function for a store to change it's value
changeFunc: (suppliedValue) => set(functions[suppliedValue]),
reset: () => set(defaultValue)
};
}
export const getData = createCustomStore(() => "default");
export const updateKey = () => {
// this to update which function the store uses
getData.changeFunc("funcB")
}
在App.svelte
<script>
import { getData } from './store.js';
import { updateKey } from './store.js';
setTimeout(function() {
updateKey()
}, 1000);
</script>
<h1>{$getData()}</h1>
我们将 $
添加到 getData
,因为它是一个保存函数引用的存储,而 ()
用于执行 getData
存储引用的任何函数。因为它是 getData
的每个值更改(函数更改)的存储,所以 html 将被更新
这里是一个repl的实现