1. 状态存储Store

不是所有的应用程序状态都属于应用程序的组件层次结构。有时，有些值需要由多个不相关的组件或常规的JavaScript模块访问。

在Svelte中，我们用stores来做这件事情。存储一个带有订阅方法的对象，该方法允许在存储值发生更改时通知相关方。

示例场景：

• 我们通过store.js来存储变量count，这是一个可重写writable的变量store，可重写意味着除了订阅方法外，还拥有set和update方法
• 在App.svelte中，count是一个存储值，我们在count中设置count_value订阅回调。在监听count值发生变化时触发该回调，展示处理后最新的值

1.1 更新状态值 count.update(fn) writable变量才拥有的方法

count.update(n => n + 1)
update方法接受一个参数，n表示当前count的值，将当前这个值进行操作

1.2 设置状态值 count.set(val) writable变量才拥有的方法

count.set(0)
set方法接受一个值，可以直接将count设置为该值

1.3 订阅变量变化 count.subscribe(fn)

count.subscribe(value => {
count_value = value
})
subscribe方法接受一个函数，订阅这个count变量的变化

1.4 代码片段

• store.js

store.js // 文件名自定义，在文件中可定义想要在全局使用的变量
// 引入writable，包裹变量初始值，奠定定义的变量是什么类型
// writable意味着除subscribe，还拥有set和update方法
import { writable } from "svelte/store";
// 将变量export出去，可以在其他文件中进行导入使用
export const count = writable(0)

• Incrementer.svelte

Incrementer.svelte
// 控制增加功能的组件，修改count的值
<script>
import { count } from '../store.js'
function increment() {
count.update(n => n + 1) // 使用update方法更新count变量的值，update方法接受一个函数作为参数
}
</script>
<main>
<button on:click={increment}>+</button>
</main>

• Decrementer.svelte

Decrementer.svelte
// 控制减少功能的组件，修改count的值
<script>
import { count } from '../store.js'
function decrement() {
count.update(n => n - 1) // 使用update方法更新count变量的值，update方法接受一个函数作为参数
}
</script>
<main>
<button on:click={decrement}>-</button>
</main>

• ResetCount.svelte

ResetCount.svelte // 控制重置功能的组件，将count设为指定的值
<script>
import { count } from '../store.js'
function resetCount() {
count.set(0)
}
</script>
<main>
<button on:click={resetCount}>reset</button>
</main>

• App.svelte

App.svelte // 将所有组件放置在该父组件中，执行后续一系列值变换的操作
<script>
import { count } from "./store.js";
import Incrementer from './components/Incrementer.svelte'
import Decrementer from './components/Decrementer.svelte'
import ResetCount from './components/ResetCount.svelte'
let count_value;
const unsubscribe = count.subscribe(value => {
count_value = value
})
</script>
<main>
<h1>The count is { count_value }</h1>
<Incrementer />
<Decrementer />
<ResetCount />
</main>

2. 自动订阅 $变量

上述示例应用程序运行正常，但是我们定义的unsubscribe函数从未被调用。如果对组件进行多次实例化和销毁，这将导致内存泄漏。我们可以在生命周期中销毁时调用unsubscribe方法

	const unsubscribe = count.subscribe(value => {
count_value = value;
});
onDestroy(unsubscribe);

上述方式可以解决这个问题。但若你的组件订阅了多个store，整个流程变得单调且有很多重复的代码和逻辑。在svelte中你可以通过在store值前面增加$来引用store值

// 我们可以直接使用$store变量的形式获取当前的值
<h1>The count is { $count }</h1>

注意： 自动订阅只适用于在组件的顶级作用域声明(或导入)的store变量

3. 只读(Readable) Store

并不是所有的store都需要在其他位置进行值的变更，比如代表鼠标的位置或用户地理位置的store，这样的store我们只是获取后进行使用即可，不需要再更改，对于这种情况，我们可以使用readable(只读)store。

• 格式

import { readable } from 'svelte/store';
export const time = readable(null, function start(set) {
...
return function stop() {};
});

• readable第一个参数是个初始值，可以为null或undefined，第二个参数是start函数，该函数有一个set回调方法设置值，并返回一个stop函数。当store首次被subscribe时调用start函数，stop则是最后当subscribe被unsubscribe时调用。

完整代码：

store.js
import { readable } from "svelte/store";
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date().toLocaleString())
}, 1000)
return function stop() {
clearInterval(interval)
}
})

App.svelte
<script>
import { time } from './store.js';
</script>
<main>
<h1>{$time}</h1>
</main>

4. store派生(derived)

你可以创建一个store，其内的值可以派生与一个或多个其他store。

• 格式 derived(源数据, 派生数据)

store.js
import { derived, readable } from "svelte/store";
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date())
}, 1000)
return function stop() {
clearInterval(interval)
}
})
const start = new Date()
export const elapsed = derived(
time,
$time => Math.round(($time -start) / 1000)
)

App.svelte
<script>
import { time, elapsed } from './store.js';
</script>
<main>
<h1>当前时间是：{$time}</h1>
<h2>页面已经打开了{$elapsed}秒</h2>
</main>

5. 自定义store

只要一个对象正确的使用subscribe，它就是可以称之为store。因此，使用特定语法来创建自定义store变得非常容易。

这个count store在前面的例子中包含increment、decrement和reset组件，为了防止暴露set和update方法，我们可以对其进行改写

• store.js

import { writable } from "svelte/store";
function createCount() {
const { subscribe, update, set } = writable(0)
return {
subscribe,
increment: () => update(val => val + 1),
decrement: () => update(val => val - 1),
reset: () => set(0)
}
}
export const count = createCount()

• App.svelte

<script>
import { count } from "./store.js";
</script>
<main>
<h1>The count is {$count}</h1>
<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>
</main>

6. 绑定store

如果store可写入的（即具有set方法），则可以绑定其值，就像可以绑定局部组件状态一样。

• store.js

import { derived, writable } from "svelte/store";
export const name = writable('Fttx');
export const greeting = derived(
name,
$name => `Hello, my girl ${$name}`
)

• App.svelte

<script>
import { name, greeting } from "./store.js";
</script>
<main>
<h1>{$greeting}</h1>
<input bind:value={$name}>
<button on:click="{() => $name += '!'}">Add exclamation mark!</button>
</main>

此刻，我们更改name的输入值，其值和依赖项都将获得更新。 $name += '!' 相当于 name.set($name + '!')。

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~

最后

以上就是直率鞋垫为你收集整理的SveletJs学习——Stores1. 状态存储Store2. 自动订阅 $变量3. 只读(Readable) Store4. store派生(derived)5. 自定义store6. 绑定store的全部内容，希望文章能够帮你解决SveletJs学习——Stores1. 状态存储Store2. 自动订阅 $变量3. 只读(Readable) Store4. store派生(derived)5. 自定义store6. 绑定store所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。