Skip to content

Commit

Permalink
add pinia getters and polish other Vuex contents
Browse files Browse the repository at this point in the history
  • Loading branch information
joshua1988 committed Dec 17, 2023
1 parent 4a881b8 commit 142e874
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 3 deletions.
1 change: 1 addition & 0 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ module.exports = {
'/pinia/intro',
'/pinia/store',
'/pinia/state',
'/pinia/getters',
],
},
{
Expand Down
60 changes: 60 additions & 0 deletions docs/pinia/getters.md
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>
```
3 changes: 1 addition & 2 deletions docs/pinia/state.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const useStore = defineStore('app', {
});
```

## state 접근
## state 사용

컴포넌트의 setup() 함수 안에서 반환한 값으로 상태를 접근합니다.

Expand Down Expand Up @@ -48,7 +48,6 @@ export default {
</code-block>
</code-group>


```html
<template>
<p>{{ store.count }}</p>
Expand Down
2 changes: 1 addition & 1 deletion docs/vuex/getters.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Getters

# getters

getters 속성은 computed 속성과 매칭되는 기술 요소입니다. 상태(state) 값이 변경되었을 때 변화에 따른 차이를 자동으로 반영하여 값을 계산해줍니다.
getters 속성은 computed 속성과 같은 역할을 합니다. 상태(state) 값이 변경되었을 때 변화에 따른 차이를 자동으로 반영하여 값을 계산해줍니다.

## getters 선언

Expand Down

0 comments on commit 142e874

Please sign in to comment.