svelte教程(8)stores

简介: 有时,您将需要多个不相关的组件或常规的JavaScript模块访问这些值。在Svelte,我们通过store来做到这一点。store只是一种对象,该对象具有一种subscribe方法,该方法允许在store的value发生变化时通知订阅过的组件。

有时,您将需要多个不相关的组件或常规的JavaScript模块访问这些值。

在Svelte,我们通过store来做到这一点。store只是一种对象,该对象具有一种subscribe方法,该方法允许在store的value发生变化时通知订阅过的组件。

可写 store

通过 writable 方法可以创建一个可写store,传入两个参数value, start。

  • value:初始值
  • start:获得第一个订阅者时调用,拥有一个参数为set的回调。可以返回一个stop方法,该方法在最后一个订阅者退订时执行。
import { writable } from 'svelte/store';

export const count = writable(0,(set)=>{
  console.log('subscribe count')
  set(100)
  return ()=>{
    console.log('clear count')
  }
});

可读store拥有三个方法:update 、set、subscribe。

  • set: 设置value值。
  • update: 更新value值,接受一个参数为value的方法,return一个新的value值。
function update(fn) {
   set(fn(value));
}
  • subscribe: 订阅该store,接受一个参数为value的方法,用于获得value值并进行处理。返回值为一个退订方法,执行该方法完成退订。
<script>
  import { onDestroy } from "svelte";
  import { count } from "../stores";
  let count_value;
  const unsubscribe = count.subscribe(value => {
    count_value = value;
  });
  onDestroy(unsubscribe());
</script>

<h1>The count is {count_value}</h1>
<button
  on:click={() => {
    count.update(c => c - 1);
  }}>
  -
</button>
<button
  on:click={() => {
    count.update(c => c + 1);
  }}>
  +
</button>
<button
  on:click={() => {
    count.set(0);
  }}>
  reset
</button>

自动订阅

使用$进行自动订阅,自动订阅的store将在组件销毁时自动调用停止订阅方法。

<script>
  import { onDestroy } from "svelte";
  import { count } from "../stores";
</script>

<h1>The count is {$count}</h1>
<button
  on:click={() => {
    count.update(c => c - 1);
  }}>
  -
</button>
<button
  on:click={() => {
    count.update(c => c + 1);
  }}>
  +
</button>
<button
  on:click={() => {
    count.set(0);
  }}>
  reset
</button>

只读store

只读store就是没有暴露update、set方法的可写store。

import {
  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);
  };
});
<script>
    import { time } from '../stores';

    const formatter = new Intl.DateTimeFormat('en', {
        hour12: true,
        hour: 'numeric',
        minute: '2-digit',
        second: '2-digit'
    });
</script>

<h1>The time is {formatter.format($time)}</h1>

派生store

您可以使用创建一个store,并且这个store基于其他一个或者多个store,可以使用派生store。

export const elapsed = derived(
  time,
  $time => Math.round(($time - start) / 1000)
);

derived接受三个参数:

  • stores:可以为一个store对象,或者为一个数组。
  • fn:接受一个方法包含两个参数values,set。如果stores为数组,values也为数组,如果stores为store对象,values为改store的value。如果没有set参数,派生store的value为fn的返回值,如果包含set参数可以使用set方法指定value值。
  • initial_value:初始值(异步时使用)

绑定 store

如果store是可写的(即它具有set方法),则可以绑定其值,就像可以绑定到本地组件一样。

也可以通过直接赋值将value写进store。

<input bind:value={$count}>

<button on:click="{() => $count += 1}">
    + 1
</button>

本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn

目录
相关文章
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
5月前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
89 1
|
JavaScript 前端开发 UED
单文件组件(Single-File Components):Vue.js开发的模块化之道
Vue.js是一款流行的JavaScript框架,以其简洁、灵活和易用而广受欢迎。其中一个Vue.js的强大功能就是单文件组件(Single-File Components),它使得Vue.js应用的开发更加模块化和可维护。在本博客中,我们将深入探讨单文件组件的概念、结构、用法,以及如何利用它们来构建清晰、可复用和高效的Vue.js应用。
198 0
|
资源调度 JavaScript
ant-design-vue:基础使用
ant-design-vue:基础使用
249 0
|
JavaScript
【Vue 开发实战】基础篇 # 12:常用高级特性provide/inject
【Vue 开发实战】基础篇 # 12:常用高级特性provide/inject
96 0
【Vue 开发实战】基础篇 # 12:常用高级特性provide/inject
|
JavaScript API 索引
从实战里总结使用ant design vue的小技巧
从实战里总结使用ant design vue的小技巧
345 0
从实战里总结使用ant design vue的小技巧
|
JavaScript 前端开发 API
ant design vue 的实战应用与部分总结
前端框架层出不穷,虽说万变不离其宗,但对于小白来说上手也需要一个过程 对于刚工作的我来说,第一次正式使用新框架,完全靠自己摸索和百度,写了一个多月,也总结了一点东西,有些小细节还是值得记录一下的,留个纪念 真实的项目总是面临着各种各样的要求,没有时间去学习,只有上来就干,从实战中学习是最好的方式。👏🏻👏🏻👏🏻 第一次使用新框架,总会有一些磕磕绊绊,即使有API介绍,但是有的不上手还真搞不懂,所以从实战中我也记录了一些使用的方式
208 0
ant design vue 的实战应用与部分总结
|
JavaScript
vue快速学习03、ant-design
vue快速学习03、ant-design
123 0
vue快速学习03、ant-design
|
前端开发
react项目实战学习笔记-学习9-ReactDOM.render is no longer supported in React 18
react项目实战学习笔记-学习9-ReactDOM.render is no longer supported in React 18
146 0
|
缓存 资源调度 JavaScript
Ant Design of Vue详细学习笔记(持续更新)
Ant Design of Vue详细学习笔记(持续更新)
Ant Design of Vue详细学习笔记(持续更新)