{"id":200,"date":"2023-09-12T09:07:57","date_gmt":"2023-09-12T00:07:57","guid":{"rendered":"https:\/\/m-potion.com\/?p=200"},"modified":"2024-04-09T11:08:04","modified_gmt":"2024-04-09T02:08:04","slug":"nuxt3-store","status":"publish","type":"post","link":"https:\/\/m-potion.com\/information\/nuxt3-store","title":{"rendered":"Nuxt3 Store"},"content":{"rendered":"\n
export const useCounter = () => useState<number>('counterState', () => 0);\nexport const useColor = () => useState<string>('color', () => 'pink');\n<\/code><\/pre>\n\n\n\n\n- pages\/index.vue<\/li>\n<\/ul>\n\n\n\n
<script setup lang=\"ts\">\nconst counter = useState('counter', () => Math.round(Math.random() * 1000));\nconst color = useColor(); \/\/ Same as useState('color')\nconst counterState = useCounter();\n<\/script>\n\n<template>\n <div>\n <div>\n Counter: {{ counter }}\n <button @click=\"counter++\">+<\/button>\n <button @click=\"counter--\">-<\/button>\n <\/div>\n <div>\n Counter: {{ counterState }}\n <button @click=\"counterState++\">+<\/button>\n <button @click=\"counterState--\">-<\/button>\n <\/div>\n\n <p>Current color: {{ color }}<\/p>\n <\/div>\n<\/template>\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\uae30\uc874\uc5d0 \uc0ac\uc6a9\ud558\ub358 store, composition API ? \ud615\ud0dc\ub85c \uc218\uc815 \uacb0\uacfc<\/h3>\n\n\n\nimport { defineStore } from 'pinia';\r\n\r\nexport const surveyStore = defineStore('survey', () => {\r\n const surveyList = ref([]);\r\n const apiResult = ref(0);\r\n\r\n async function fetchSurveyList() {\r\n try {\r\n const res = await $fetch(`\/backapi\/selectList`, {\r\n method: 'POST',\r\n body: {\r\n mapperName: 'survey.selectSurveyList',\r\n params: { surveyId: 1 },\r\n },\r\n });\r\n console.log(res.resMap);\r\n\r\n surveyList.value = res.resMap.reduce((acc, obj) => {\r\n const { questionId } = obj;\r\n acc[questionId] = acc[questionId] ?? [];\r\n acc[questionId].push(obj);\r\n return acc;\r\n }, {});\r\n } catch (error) {\r\n surveyList.value = [];\r\n console.log(error);\r\n }\r\n }\r\n\r\n return { surveyList, apiResult, fetchSurveyList };\r\n});\r<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\uae30\uc874\uc5d0 \uc0ac\uc6a9\ud558\ub358 store, composition API ? \ud615\ud0dc\ub85c \uc218\uc815 \uacb0\uacfc<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-200","post","type-post","status-publish","format-standard","hentry","category-information"],"yoast_head":"\n
Nuxt3 Store - \uace0\uc6b4\uadf8\ubbf8<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n