如何安装svelte_Card.svelte的国家管理

如何安装svelte

In 2020, web development is not only based on component-driven approaches but also on the use of state management solutions.

在2020年，Web开发不仅基于组件驱动的方法，而且还基于状态管理解决方案的使用。

In early JavaScript frameworks like Angular, the states of your application are commonly embedded inside routes, services, controllers, local storage, and session storage.

在像Angular这样的早期JavaScript框架中，应用程序的状态通常嵌入在路由 ， 服务 ， 控制器 ， 本地存储和会话存储内部 。

Even if it seems useful having so many different solutions for storing data, it becomes a problem when you have a large application and it’s hard to keep track of what was being stored and where.

即使拥有许多用于存储数据的不同解决方案似乎有用，但是当您拥有大型应用程序时却很难解决存储位置和存储位置的问题。

Over time, third-party solutions were born to resolve this lack such as Redux and Vuex.

随着时间的推移，诞生了第三方解决方案来解决这种不足，例如Redux和Vuex 。

Svelte has a more simplistic approach to state management by eliminating the need to install libraries and offering stores that manage state within the framework.

Svelte通过消除安装框架和提供在框架内管理状态的存储的需求，而对状态管理采用了更为简化的方法。

In this article, we’ll see how Svelte manages and handles states for sharing data between components.

在本文中，我们将看到Svelte如何管理和处理状态以在组件之间共享数据 。

上下文API (The Context API)

The Svelte context API is perfect for cross-component communication without having to complicate your codebase by passing around props

Svelte上下文API非常适合跨组件通信，而不必通过传递道具而使您的代码库复杂化

The Context API is provided by 2 functions which are provided by the svelte package: getContext and setContext.

Context API由svelte包提供的2个函数提供： getContext和setContext 。

You can make an object or value available anywhere within the app by setting it in the context and associating it with a key:

您可以通过在上下文中设置对象或值并将其与键关联，从而在应用程序中的任何位置使对象或值可用 ：

<script>
  import { setContext } from 'svelte'

  const someObject = {}

  setContext('someKey', someObject)
</script>

To make someKey available in a different component within the app, simply import it using the getContext function:

要使someKey在应用程序的其他组件中可用，只需使用getContext函数将其导入：

<script>
  import { getContext } from 'svelte'
  
  const someObject = getContext('someKey')
</script>

Note that getContext can only be used to retrieve a key in the component that used setContext or a component within the same component tree.

请注意， getContext仅可用于检索使用setContext的组件或同一组件树中的组件中的键。

To communicate properties and values across two components within different trees, Svelte uses stores.

为了在不同树中的两个组件之间传递属性和值，Svelte使用stores 。

使用Svelte商店 (Using Svelte stores)

Svelte stores are a great tool to handle your app state when components need to talk to each other without passing props around too much and you have some properties that need to be accessed by different components.

Svelte商店是一个很好的工具，可以在组件之间需要相互交谈而又不会过多传递道具时，处理您的应用程序状态，并且您具有一些需要不同组件访问的属性。

Svelte handles this type of property via stores, a store is an object that holds a value and allows you to be notified of when that value changes.

Svelte通过商店处理这种类型的属性，商店是一个保存值的对象， 当值改变时，您可以得到通知 。

Imagine an app with a logged-in user. It would be tedious to pass the user= prop to every component. Many components would have to take the user= prop, just to pass it along because a grand-child or great-grand-child needed it.

想象一个具有登录用户的应用程序。 将 user= prop 传递 给每个组件 将很繁琐 。 许多组件必须采用 user= 道具，只是为了将其传递，因为孙子或曾孙需要它。

Svelte has two kinds of stores for handling state in applications: writable and readable stores.

Svelte有两种用于处理应用程序中状态的存储： writable存储和readable存储。

可写商店 (Writable stores)

Writable stores are objects that contain values or properties that can be accessed by different components.

可写存储是包含值或属性的对象，这些值或属性可由不同组件访问。

Let’s use the writable store to hold a value that we can then alter or pass around our app.

让我们使用可写存储来保存一个值，然后我们可以更改或传递我们的应用程序。

To access this value, you would export it from the store and save it as a JavaScript file:

要访问此值，您可以从商店中导出它，并将其另存为JavaScript文件：

<script>
  import writable from 'svelte/store'


  export const city = writable('Milan')
</script>

Then import it into any other component:

然后将其导入任何其他组件：

<scipt>
  import { city } from './location.js'
</script>

The value in a writable store can be altered.

可写存储中的值可以更改。

If you need to change the value of city in any component where it is imported, you can use the set() method:

如果需要在导入city的任何组件中更改city的值，则可以使用set()方法：

<script>
  import { city } from './location.js'
  
  city.set('Rome')
</script>

Or you can use the update() method to run a callback that passes the current value as an argument:

或者，您可以使用update()方法来运行将当前值作为参数传递的回调：

<script>
  import { city } from './location.js'

  const newCity = 'Rome'

  function changeCity() {
    city.update(existing => newCity)
  }
</script>

Another way you could have components watch out for changes to the value you set in your store is by using Svelte’s subscribe() method:

您可以让组件监视在商店中设置的值的更改的另一种方法是使用Svelte的subscription subscribe()方法：

<script>
  import { city } from './location.js'
  
  const watch = city.subscribe(value => {
    console.log(value);
  });
</script>

可读的商店 (Readable stores)

The readable store is, as the name suggests, a read-only store.

顾名思义， 可读存储是只读存储。

It can be used if the data managed in the store should not be manipulated by the user.

如果用户不应该操纵存储中管理的数据，则可以使用它。

Readable stores are special because they can’t be updated from the outside, there’s no set() or update() method.

可读存储很特殊，因为它们不能从外部进行更新 ，没有set()或update()方法。

When using a readable store, you have to set its value from when you create it.

使用可读存储时， 必须从创建时开始设置它的值 。

Readable stores are mostly used to handle data that you need to be immutable.

可读存储主要用于处理您需要不可变的数据。

Let’s see an example and make a counter using a readable store:

让我们看一个示例，并使用可读存储创建一个计数器：

<script>
  import { readable } from 'svelte/store'


  export const counter = readable(0, set => {
    setTimeout(() => {
     set(1)
    }, 1000)
  })
</script>

The counter above can then be imported into another component:

然后可以将上面的计数器导入另一个组件：

<script>
  import { counter } from './store.js'
</script>


<h1>You have {$counter} seconds left!<h1>

结论 (Conclusion)

Svelte is not reinventing the wheel when it comes to state management: We are already familiar with the idea of implementing state management via stores from React, Angular and Vue.

Svelte不会在状态管理方面进行彻底改造：我们已经熟悉通过React ， Angular和Vue的商店实现状态管理的想法。

Svelte’s adaptability makes it a great choice to use when building small scale apps that could require you to handle state to an extent.

Svelte的适应性使其成为构建小型应用程序 (可能需要您在某种程度上处理状态)时使用的绝佳选择。

The possibility to create custom stores saves a lot of boilerplate code (which can be replaced by libraries) and allows you to implement the stores with domain-specific logic.

创建自定义存储的可能性节省了很多样板代码( 可以由库替换 )，并允许您使用特定于域的逻辑来实现存储。

Certainly, we should see more promising features and alterations on this with more contributors to the Svelte repo on GitHub.

当然，我们应该在GitHub上的Svelte存储库中看到更多有前途的功能和变化，以及更多的贡献者。

Thanks for reading!

谢谢阅读！

翻译自: https://medium.com/dev-genius/state-management-in-svelte-b045213c9138

如何安装svelte