# 컴포넌트 통신방법 4 : store

#### 예제 - store

* store.js

```
import  { writable } from 'svelte/store'

let value = 0

export const count = writable(value)
```

* App.svelte

```
<script>
import { setContext } from 'svelte'

import PanelComponent from './components/panelComponent.svelte'

</script>

<PanelComponent />
```

* panelComponent.svelte

```
<script>
import ButtonComponent from './buttonComponent.svelte'

import { count } from '../store'
</script>

<div class="penal">
  <h1>{$count}</h1>
  
  <ButtonComponent  />
  
</div>

<style>
  .penal {
    padding: 20px;
    display:flex;
    flex-direction: column;
    justify-items: center;
    justify-content: space-around;
    align-items: center;
    height: 500px;
    width:400px;
    background: #e2e2e2;
    border: 1px solid #777777;
  }
</style>
```

* buttonComponent.svelte

```
<script>
import { count } from '../store'

function handleIncrementCount() {
  count.update(count => count + 1)
}

</script>

<button on:click={handleIncrementCount} >
  increment count [{$count}]
</button>
```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&#x26;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>