-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add pinia getters and polish other Vuex contents
- Loading branch information
1 parent
4a881b8
commit 142e874
Showing
4 changed files
with
63 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -195,6 +195,7 @@ module.exports = { | |
'/pinia/intro', | ||
'/pinia/store', | ||
'/pinia/state', | ||
'/pinia/getters', | ||
], | ||
}, | ||
{ | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
--- | ||
title: Getters 🆕 | ||
--- | ||
|
||
# Getters | ||
|
||
getters는 여러 컴포넌트에서 사용할 수 있는 [컴퓨티드(computed) 속성](../syntax/computed.md)을 의미합니다. | ||
|
||
## getters 선언 | ||
|
||
getters는 다음과 같이 정의합니다. 뷰엑스에서 정의하던 방식과 같습니다. | ||
|
||
```js | ||
export const useStore = defineStore('app', { | ||
state: () => { | ||
return { | ||
count: 0 | ||
} | ||
}, | ||
getters: { | ||
doubleCount(state) { | ||
return state * 2; | ||
} | ||
} | ||
}); | ||
``` | ||
|
||
## getters 사용 | ||
|
||
앞에서 선언한 getters는 컴포넌트에서 아래와 같이 사용합니다. | ||
|
||
<code-group> | ||
<code-block title="Vue 3"> | ||
```js | ||
export default defineComponent({ | ||
setup() { | ||
const store = useStore(); | ||
return { store }; | ||
} | ||
}); | ||
``` | ||
</code-block> | ||
|
||
<code-block title="Vue 2"> | ||
```js | ||
export default { | ||
setup() { | ||
const store = useStore(); | ||
return { store }; | ||
} | ||
}; | ||
``` | ||
</code-block> | ||
</code-group> | ||
|
||
```html | ||
<template> | ||
<p>{{ store.doubleCount }}</p> | ||
</template> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters