---
# System prepended metadata

title: Passing Stores
tags: [Component Props]

---

# Passing Stores

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
The previous tutorial introduced you how you could pass primitives and objects to components. In this tutorial, we will learn how to pass stores to components, which is way more efficient in terms of rerendering.
::: 

上一個教學向你介紹了如何將原始型態的資料和物件型態的資料傳遞給元件。而在本教學中，我們將會學習到如何將 `store` 傳遞給元件，這在渲染方面更加有效。

:::spoiler ...
When you click on the `+1` button, the `<App>` is re-rendered to update the `<Display>` bindings. The re-rendering of `<App>` is needed to update the props of `<Display>`, but this process doesn't update to what the user sees, so it is a waste of resources.
::: 

當你點擊 `+1` 按鈕時， `<App>` 會被重新渲染以更新 `<Display>` 所綁定的值。 `<App>` 的重新渲染是必要的，以更新 `<Display>` 的 `props` 。但這個的過程不會更新使用者看到的內容，所以是一種浪費資源的過程。

:::spoiler ...
A better approach is to only re-render `<Display>` component by passing in the `CountStore` rather than the `count` value. Since the store reference never changes, the `<App>` component doesn't need to re-render.
::: 

比傳遞 `count` 的值更好的方式是傳遞 `CountStore` ，這樣就只會讓 `<Display>` 元件重新渲染。由於 `store` 的參考永遠不會改變，所以 `<App>` 元件就不需要重新渲染。

:::spoiler ...
Your task: Change the code to pass in store rather than store.count.
::: 

你的任務是：更改程式以傳入 `store` 而不是 `store.count` 。

:::spoiler ...
Two benefits emerge by making the above change:
::: 

上述的變動會產生兩個好處：

:::spoiler ...
- The `<App>` component doesn't need to be downloaded or re-rendered.
::: 

- `<App>` 元件不需要被下載或是被重新渲染。

:::spoiler ...
## Best Practice
::: 

## 最佳實踐

:::spoiler ...
A best practice to follow in Qwik features passing a store to child components rather than individual primitives. When you use primitives, the parent component needs to rerender just to pass in the new value. When you pass in a store, the parent component doesn't need to rerender.
::: 

一個最好的練習是跟隨 Qwik 的功能傳遞一個 `store` 給子元件，而不是個別的原始型態的資料。當你使用原始型態的資料，父元件就會因為需要傳遞新的值而重新渲染。當你傳遞一個 `store` ，父元件就不需要重新渲染。

[下一步： Passing Closures](https://hackmd.io/mCPSmLeoR6-8zySMKNluUw)


###### tags: `Component Props`