diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 51d38b691..90fbbef10 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -196,6 +196,7 @@ module.exports = { '/pinia/store', '/pinia/state', '/pinia/getters', + '/pinia/actions', ], }, { diff --git a/docs/pinia/actions.md b/docs/pinia/actions.md new file mode 100644 index 000000000..21079a857 --- /dev/null +++ b/docs/pinia/actions.md @@ -0,0 +1,89 @@ +--- +title: Actions ๐Ÿ†• +--- + +# Actions + +ํ”ผ๋‹ˆ์•„์˜ ์•ก์…˜(actions)์€ ๋ทฐ์—‘์Šค์˜ ๋ฎคํ…Œ์ด์…˜(mutations)์™€ ์•ก์…˜(actions)์„ ํ•ฉ์ณ๋†“์€ ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๊ธฐ์กด์— ๋ทฐ์—‘์Šค์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋ ค๋ฉด ๋‹ค์Œ์˜ ์ ˆ์ฐจ๋ฅผ ๋”ฐ๋ผ์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. + +- actions -> mutations -> state + +์•ก์…˜์—์„œ API ์š”์ฒญ์„ ํ•˜๊ณ  ๋ฐ›์•„์˜จ ๊ฐ’์„ ๋ฎคํ…Œ์ด์…˜์—์„œ ๋„˜๊ธด ํ›„ ๋ฎคํ…Œ์ด์…˜์—์„œ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•ด ์ฃผ๋Š” ๋ฐฉ์‹์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ ๋ฌธ๋ฒ•์ ์ธ ์ธก๋ฉด์—์„œ ๋‹ค์†Œ ์žฅํ™ฉํ•˜๊ณ  ๋ฒˆ๊ฑฐ๋กœ์šด ์ธก๋ฉด์ด ์žˆ์–ด ํ”ผ๋‹ˆ์•„์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‹จ์ˆœํ™” ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. + +- actions -> state + +## actions ์„ ์–ธ + +์•ก์…˜์„ ํ•˜๋‚˜ ์„ ์–ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. + +```js +export const useStore = defineStore('app', { + state: () => { + return { + count: 0 + } + }, + actions: { + addCount() { + this.count++; + } + } +}); +``` + +์œ„ ์ฝ”๋“œ๋Š” `count` ๋ผ๋Š” ์ƒํƒœ ๊ฐ’์„ 1์”ฉ ์ฆ๊ฐ€์‹œํ‚ค๋Š” `addCount()` ์•ก์…˜ ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ทฐ์—‘์Šค์™€ ๋‹ค๋ฅด๊ฒŒ ์•ก์…˜ ํ•จ์ˆ˜ ์•ˆ์—์„œ `this`๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐ”๋กœ `state`์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +๋˜ํ•œ, ์•„๋ž˜์™€ ๊ฐ™์ด ๋น„๋™๊ธฐ ์ฝ”๋“œ๋„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +```js +export const useStore = defineStore('app', { + state: () => { + return { + count: 0 + } + }, + actions: { + async fetchCount() { + const response = await axios.get('/v1/api/productCount'); + this.count = response.data; + } + } +}); +``` + +## actions ์‚ฌ์šฉ + +์•ก์…˜์€ state, getters์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. + + + +```js +export default defineComponent({ + setup() { + const store = useStore(); + return { store }; + } +}); +``` + + + +```js +export default { + setup() { + const store = useStore(); + return { store }; + } +}; +``` + + + +```html + +``` + +์œ„ ์ฝ”๋“œ์—์„œ ๋”ํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด `addCount()` ์•ก์…˜ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋ฉด์„œ ์Šคํ† ์–ด์˜ `count` ์ƒํƒœ๊ฐ€ ์ฆ๊ฐ€๋ฉ๋‹ˆ๋‹ค. \ No newline at end of file diff --git a/docs/pinia/getters.md b/docs/pinia/getters.md index 6d772eaf5..f992663cc 100644 --- a/docs/pinia/getters.md +++ b/docs/pinia/getters.md @@ -8,7 +8,7 @@ getters๋Š” ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” [์ปดํ“จํ‹ฐ๋“œ(computed ## getters ์„ ์–ธ -getters๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๋ทฐ์—‘์Šค์—์„œ ์ •์˜ํ•˜๋˜ ๋ฐฉ์‹๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. +getters๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๋ทฐ์—‘์Šค์—์„œ ์ •์˜ํ•˜๋˜ ๋ฐฉ์‹๊ณผ ๋™์ผํ•˜๊ฒŒ ์ฒซ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ state๋ฅผ ์ ‘๊ทผํ•˜์—ฌ ๊ฐ’์„ ์กฐ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ```js export const useStore = defineStore('app', {