如何安装svelte_Svelte的可读写商店入门

墨蓝 2022-11-27 04:29 92阅读 0赞

如何安装svelte

If you’re familiar with Redux or Vuex, then the Svelte stores offer a similar feature for state management. If your app is getting complicated, then it becomes difficult for components to relay data between themselves. Moving it to a global data store is a better option. Here, we’ll look at two store options that Svelte makes available: writable stores and readable stores.

如果您熟悉Redux或Vuex，那么Svelte商店提供了类似的状态管理功能。 如果您的应用变得越来越复杂，则组件之间很难在它们之间中继数据。 将其移动到全局数据存储是一个更好的选择。 在这里，我们将看看Svelte提供的两个商店选项： 可写商店和可读商店 。

## 可写存储 **(**Writable Store**)** ##

Let’s go ahead and create a global state management file in our Svelte project - let’s call it `store.js` and import the `writable` function.

让我们继续在Svelte项目中创建一个全局状态管理文件-我们将其`store.js`并导入`writable`函数。

import { writable } from "svelte/store";
    
    let counter = writable(1);
    
    export {counter}

We’ve created a variable called `counter`, which is a writable store. `counter` now has the following self-explanatory methods:

我们创建了一个名为`counter`的变量，这是一个可写的存储区。 `counter`现在具有以下不言自明的方法：

*  `set`
    
    `set`
 *  `update`
    
    `update`

Let’s create a custom component called `Nested.svelte` and use the `counter` store we just created.

让我们创建一个名为`Nested.svelte`的自定义组件，并使用刚刚创建的`counter`存储。

Notice that during usage, we prefix the the variable with `$`, since this is a named import.

注意，在使用过程中，我们给变量加上`$`前缀，因为这是一个命名的import。

Let’s wrap it up by importing the component in the `App.svelte` file and create a method to write the `counter` variable to observe reactivity across nested components.

让我们通过将组件导入`App.svelte`文件中来进行`App.svelte`并创建一种方法来编写`counter`变量，以观察嵌套组件之间的React性。

the `counter` uses an `update` method that takes a function whose parameter is the current value of the writable store and returns the modified value. If we run this app, we should be able to see the value inside the `Nested` component getting updated as we click on the button.

`counter`使用一种`update`方法，该方法采用一个函数，该函数的参数是可写存储的当前值，并返回修改后的值。 如果运行此应用程序，则单击按钮时，我们应该能够看到`Nested`组件中的值正在更新。

While we’re at it, let’s go ahead and add a `reset` button to `App.svelte`.

在此过程中，让我们继续，向`App.svelte`添加一个`reset`按钮。

function resetCounter() {
      counter.set(1);
    }

<button on:click={resetCounter}>Reset</button>

The `resetCounter` uses the `set` method of our writable store.

`resetCounter`使用我们可写存储的`set`方法。

Now, the `writable` function also supports a second argument which is also a function. Here’s the signature for that function:

现在， `writable`函数还支持第二个参数，它也是一个函数。 这是该功能的签名：

writable(value: any, (set: (value: any) => void) => () => void)

This function is fired when the first subscriber is created and it returns another function that is fired when the last subscription to the variable is destroyed. Let’s see that in action.

当创建第一个订阅者时将触发此函数，并返回在最后一次对该变量的订阅被销毁时将触发的另一个函数。 让我们看看实际情况。

In our `store.js`, add the second argument to the writable function:

在我们的`store.js` ，将第二个参数添加到可写函数中：

let counter = writable(1, () => {
      console.log("First subscriber added!");
      return () => {
        console.log("Last subscriber deleted :(");
      };
    });

To test this, we’ll mount and unmount the `Nested` component to observe the behavior, in `App.svelte`:

为了测试这一点，我们将在`App.svelte`安装和卸载`Nested`组件以观察其行为：

## 可读商店 **(**Readable Store**)** ##

Svelte also offers the `readable` function, which allows for creating readable stores whose values cannot be updated from other components. The value has to `set` from within the store. Let’s try this out, modify the `store.js` \-

Svelte还提供了`readable`功能，该功能允许创建其值无法从其他组件更新的可读存储。 该值必须在商店内`set` 。 让我们尝试一下，修改`store.js`

import { readable } from "svelte/store";
    
    let initialVal = Math.floor(Math.random()*100);
    
    let counter = readable(initialVal, (set) => {
      let incrementCounter = setInterval( () => {
        let newVal = Math.floor(Math.random()*100);
        set(newVal);
      }, 1000);
      return () => {
        clearInterval(incrementCounter);
      };
    });
    
    export {counter}

Here the `readable` counter is set with the `initialVal`, which is being passed as the first argument. The second argument is the same as with writable stores, but this time it’s a required parameter since without it there would be no other way to access the `counter` value to reset it.

在这里， `readable`计数器设置为`initialVal` ，它将作为第一个参数传递。 第二个参数与可写存储区相同，但这一次它是必需的参数，因为如果没有它，将没有其他方法来访问`counter`值以将其重置。

In this example, we generate random numbers between 0 to 100 and assign this to `counter` by using the `set` method. `update` is not available. This is a simple demo, but in real apps readable stores can use the second argument to make API calls and, based on some logic, `set` the value. This will render the components that are subscribed to this store.

在此示例中，我们生成0到100之间的随机数，并使用`set`方法将其分配给`counter` 。 `update`不可用。 这是一个简单的演示，但是在实际应用中，可读存储可以使用第二个参数进行API调用，并根据某些逻辑`set`该值。 这将呈现已订阅此商店的组件。

--------------------

As you saw, by using `writable` and `readable` stores in Svelte, we can achieve a basic form of global state management pretty easily! ✨

如您所见，通过在Svelte中使用`writable`和`readable`存储，我们可以轻松实现全局状态管理的基本形式！ ✨

> 翻译自: [https://www.digitalocean.com/community/tutorials/svelte-svelte-store][https_www.digitalocean.com_community_tutorials_svelte-svelte-store]

如何安装svelte

[https_www.digitalocean.com_community_tutorials_svelte-svelte-store]: https://www.digitalocean.com/community/tutorials/svelte-svelte-store