add pinia store and intro contents

docs/.vuepress/config.js

@@ -193,6 +193,7 @@ module.exports = {
             collapsable: false,
             children: [
               '/pinia/intro',
+              '/pinia/store',
             ],
           },
           {

docs/pinia/intro.md

@@ -17,6 +17,25 @@ title: Introduction 🆕
 👉 신규 프로젝트 중 **Composition API만** 사용하는 프로젝트는 Pinia를 사용
 :::
 
+## Pinia의 주요 속성
+
+피니아는 뷰엑스의 최신 버전이기 때문에 뷰엑스와 같은 역할을 합니다. 그리고 기존 뷰엑스의 주요 속성 4개 중 3개를 제공합니다.
+
+- state
+- getters
+- actions
+
+뷰엑스의 상태를 변경하기 위해 사용했던 mutations가 사라지고 actions 하나로 상태 변경과 비동기 처리를 모두 할 수 있게 되었습니다. 사용하는 입장에서는 다소 번거롭게 느껴졌던 문법이 간소화 되었죠. 뷰엑스와 표로 비교해 보면 다음과 같습니다.
+
+| Vue      | Vuex      | Pinia   |
+|----------|-----------|---------|
+| data     | state     | state   |
+| computed | getters   | getters |
+| methods  | mutations | actions |
+| methods  | actions   | actions |
+
+뷰 인스턴스의 data와 state는 같은 역할을 합니다. data는 해당 컴포넌트의 상태이고 state는 모든 컴포넌트에 공유되는 data(전역 상태)를 의미합니다. computed 속성과 getters 속성 역시 마찬가지로 해당 인스턴스에서만 사용할 것이냐 모든 컴포넌트에서 사용할 것이냐 라는 차이만 있을 뿐 역할은 같습니다. 마지막으로 methods 속성은 mutations + actions과 같은 역할을 했었는데 피니아에서는 actions만 유지하여 문법을 간소화했습니다.
+
 ## Pinia 설치
 
 피니아는 앞서 설명한 것처럼 Composition API로만 작성된 프로젝트에서 사용할 수 있습니다. Vue 2에서 사용하려면 [Composition API 플러그인](https://github.com/vuejs/composition-api)을 별도로 설치해야 하고, Vue 3에서는 컴포지션 API 스타일 코드만 작성해야 합니다.
@@ -63,4 +82,5 @@ const pinia = createPinia()
 createApp(App).use(pinia).mount('#app')
 ```
 </code-block>
-</code-group>
+</code-group>
+

docs/pinia/store.md

@@ -0,0 +1,85 @@
+---
+title: Store 🆕
+---
+
+## 스토어 선언
+
+피니아의 기본 문법을 사용하기 위해 다음과 같이 스토어를 선언합니다.
+
+```js
+// ./store/index.js
+import { defineStore } from 'pinia'
+
+export const useStore = defineStore('app', {
+  state: () => {
+    return {
+      message: 'Hello Pinia'
+    }
+  }
+})
+```
+
+위 코드는 store 폴더 아래에 index.js 라는 파일을 만들고 피니아의 기본 코드를 작성했습니다. 피니아 라이브러리에서 제공하는 `defineStore()`를 이용해서 첫 번째 인자로 스토어의 이름을 선언하고 두 번째 인자로 스토어의 내용을 정의합니다.
+
+스토어의 내용에는 `message`라는 상태(state)를 하나 정의했습니다.
+
+:::tip
+state를 정의할 때 객체 형태가 아니라 화살표 함수를 사용합니다. 뷰엑스에서는 객체 형태와 화살표 함수 형태가 모두 지원되지만 피니아에서는 화살표 함수 형태로만 작성해야 합니다.
+:::
+
+## 스토어 사용
+
+앞에서 선언한 스토어를 컴포넌트에서 사용해 보겠습니다.
+
+```html
+<!-- App.vue -->
+<template>
+  <p>{{ store.message }}</p>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { useStore } from './store/index';
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+    return { store };
+  }
+});
+</script>
+```
+
+위 코드는 App 컴포넌트에서 스토어의 상태를 화면에 표시한 코드입니다. 피니아는 이처럼 스토어를 사용하기 위해서 컴포지션 API인 [setup API](../reuse/composition.html#setup)을 꼭 사용해야 합니다. `setup()` 안에서 반환된 store는 템플릿 표현식에서 사용할 수 있기 때문에 `store.message`의 최종 결과는 앞에서 정의한 'Hello Pinia'가 됩니다.
+
+## 스토어 작명법
+
+피니아의 스토어를 작명할 때는 아래 규칙을 참고합니다.
+
+1. `defineStore()`의 첫 번째 인자는 다른 스토어들과 구분되는 유니크한 값이어야 합니다. 예를 들면, 스토어를 2개 등록할 때 이름이 겹치면 안됩니다.
+
+```js{1,9}
+export const useStore = defineStore('app', {
+  state: () => {
+    return {
+      message: 'Hello Pinia'
+    }
+  }
+})
+
+export const useUserStore = defineStore('user', {
+  state: () => {
+    return {
+      user: { name: '캡팡' }
+    }
+  }
+})
+```
+
+2. `defineStore()`를 받는 변수의 이름은 `useXXXStore`으로 작명합니다. 예를 들면, 다음과 같습니다.
+
+```
+useAppStore
+useUserStore
+useCounterStore
+```

docs/vuex/concept.md

@@ -14,9 +14,9 @@ title: Concept
 
 화면(View) -> 화면에서의 이벤트 발생(Actions) -> 데이터 변경(State)의 단방향 데이터 흐름이 특징입니다.
 
-## 뷰엑스 기술 요소
+## 뷰엑스 주요 속성
 
-뷰엑스의 주요 기술 요소는 다음과 같습니다.
+뷰엑스의 주요 속성은 다음 4개입니다.
 
 - state
 - getters

docs/vuex/helper.md

@@ -4,7 +4,7 @@ title: Helpers
 
 # 헬퍼 함수
 
-헬퍼 함수는 뷰엑스 기술 요소들을 컴포넌트에서 더 편하게 쓸 수 있도록 도와주는 API입니다. 얼마나 더 편해지는지 일반적인 사용 방식과 헬퍼 함수의 사용 방식을 비교해보겠습니다.
+헬퍼 함수는 뷰엑스의 주요 속성들을 컴포넌트에서 더 편하게 쓸 수 있도록 도와주는 API입니다. 얼마나 더 편해지는지 일반적인 사용 방식과 헬퍼 함수의 사용 방식을 비교해보겠습니다.
 
 ## 일반적인 getters 접근 방법