{"id":59574,"date":"2026-01-14T06:17:00","date_gmt":"2026-01-13T22:17:00","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/59574.html"},"modified":"2026-01-14T06:17:00","modified_gmt":"2026-01-13T22:17:00","slug":"vue-vue3-vite-%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e7%af%87-%e4%b9%8b%e3%80%90pinia-%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e6%9e%b6%e6%9e%84%e3%80%91","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/59574.html","title":{"rendered":"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011"},"content":{"rendered":"<p>\u80cc\u666f\u95ee\u9898&#xff1a;<br \/>\n\u9700\u8981\u7ba1\u7406\u5e94\u7528\u7684\u5168\u5c40\u72b6\u6001\u3002<\/p>\n<p>\u65b9\u6848\u601d\u8003&#xff1a;<br \/>\n\u4f7f\u7528 Pinia \u4f5c\u4e3a\u72b6\u6001\u7ba1\u7406\u5de5\u5177\u3002<\/p>\n<p>\u5177\u4f53\u5b9e\u73b0&#xff1a;<br \/>\n\u521b\u5efa Pinia \u5b9e\u4f8b&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ stores\/index.js<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> createPinia <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;pinia&#039;<\/span><\/p>\n<p><span class=\"token keyword\">const<\/span> pinia <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">createPinia<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> pinia<\/p>\n<p><span class=\"token comment\">\/\/ main.js<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> createApp <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;vue&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> App <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;.\/App.vue&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> pinia <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/stores&#039;<\/span><\/p>\n<p><span class=\"token keyword\">const<\/span> app <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">createApp<\/span><span class=\"token punctuation\">(<\/span>App<span class=\"token punctuation\">)<\/span><br \/>\napp<span class=\"token punctuation\">.<\/span><span class=\"token function\">use<\/span><span class=\"token punctuation\">(<\/span>pinia<span class=\"token punctuation\">)<\/span><br \/>\napp<span class=\"token punctuation\">.<\/span><span class=\"token function\">mount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;#app&#039;<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>\u7528\u6237\u72b6\u6001\u7ba1\u7406 Store \u793a\u4f8b&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ stores\/user.js<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> defineStore <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;pinia&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> ref<span class=\"token punctuation\">,<\/span> computed <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;vue&#039;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> useUserStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">defineStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;user&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u5b9a\u4e49\u72b6\u6001<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> userInfo <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> isLoggedIn <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> permissions <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5b9a\u4e49\u8ba1\u7b97\u5c5e\u6027<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> hasPermission <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">computed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">permission<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">return<\/span> permissions<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span>permission<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5b9a\u4e49\u52a8\u4f5c<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">setUser<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">user<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    userInfo<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> user<br \/>\n    isLoggedIn<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>user<br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">setPermissions<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">perms<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    permissions<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> perms<br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">clearUser<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    userInfo<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><br \/>\n    isLoggedIn<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><br \/>\n    permissions<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">updateProfile<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">profile<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    Object<span class=\"token punctuation\">.<\/span><span class=\"token function\">assign<\/span><span class=\"token punctuation\">(<\/span>userInfo<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">,<\/span> profile<span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u72b6\u6001<\/span><br \/>\n    userInfo<span class=\"token punctuation\">,<\/span><br \/>\n    isLoggedIn<span class=\"token punctuation\">,<\/span><br \/>\n    permissions<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u8ba1\u7b97\u5c5e\u6027<\/span><br \/>\n    hasPermission<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u52a8\u4f5c<\/span><br \/>\n    setUser<span class=\"token punctuation\">,<\/span><br \/>\n    setPermissions<span class=\"token punctuation\">,<\/span><br \/>\n    clearUser<span class=\"token punctuation\">,<\/span><br \/>\n    updateProfile<br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528 Store \u7684\u793a\u4f8b&#xff1a;<\/p>\n<p>&lt;template&gt;<br \/>\n  &lt;div class&#061;&#034;user-profile&#034;&gt;<br \/>\n    &lt;h2&gt;\u7528\u6237\u4fe1\u606f&lt;\/h2&gt;<br \/>\n    &lt;p&gt;\u59d3\u540d: {{ userStore.userInfo.name }}&lt;\/p&gt;<br \/>\n    &lt;p&gt;\u90ae\u7bb1: {{ userStore.userInfo.email }}&lt;\/p&gt;<br \/>\n    &lt;p&gt;\u72b6\u6001: {{ userStore.isLoggedIn ? &#039;\u5df2\u767b\u5f55&#039; : &#039;\u672a\u767b\u5f55&#039; }}&lt;\/p&gt;<\/p>\n<p>    &lt;div v-if&#061;&#034;userStore.hasPermission(&#039;user.edit&#039;)&#034;&gt;<br \/>\n      &lt;el-button &#064;click&#061;&#034;editProfile&#034;&gt;\u7f16\u8f91\u8d44\u6599&lt;\/el-button&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n    &lt;div v-else&gt;<br \/>\n      &lt;p&gt;\u60a8\u6ca1\u6709\u7f16\u8f91\u6743\u9650&lt;\/p&gt;<br \/>\n    &lt;\/div&gt;<\/p>\n<p>    &lt;el-button &#064;click&#061;&#034;logout&#034; type&#061;&#034;danger&#034;&gt;\u9000\u51fa\u767b\u5f55&lt;\/el-button&gt;<br \/>\n  &lt;\/div&gt;<br \/>\n&lt;\/template&gt;<\/p>\n<p>&lt;script setup&gt;<br \/>\nimport { useUserStore } from &#039;&#064;\/stores\/user&#039;<\/p>\n<p>const userStore &#061; useUserStore()<\/p>\n<p>const editProfile &#061; () &#061;&gt; {<br \/>\n  console.log(&#039;\u7f16\u8f91\u7528\u6237\u8d44\u6599&#039;)<br \/>\n  \/\/ \u7f16\u8f91\u903b\u8f91<br \/>\n}<\/p>\n<p>const logout &#061; () &#061;&gt; {<br \/>\n  userStore.clearUser()<br \/>\n  console.log(&#039;\u7528\u6237\u5df2\u9000\u51fa&#039;)<br \/>\n}<br \/>\n&lt;\/script&gt;<\/p>\n<p>\u5e94\u7528\u72b6\u6001\u7ba1\u7406 Store \u793a\u4f8b&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ stores\/app.js<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> defineStore <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;pinia&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> ref <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;vue&#039;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> useAppStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">defineStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;app&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token comment\">\/\/ \u4fa7\u8fb9\u680f\u72b6\u6001<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> sidebar <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token literal-property property\">opened<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token literal-property property\">withoutAnimation<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u8bbe\u5907\u7c7b\u578b<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> device <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;desktop&#039;<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5168\u5c4f\u72b6\u6001<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> fullscreen <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">ref<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5207\u6362\u4fa7\u8fb9\u680f<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">toggleSidebar<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">withoutAnimation<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    sidebar<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span>opened <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span>sidebar<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span>opened<br \/>\n    sidebar<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span>withoutAnimation <span class=\"token operator\">&#061;<\/span> withoutAnimation<br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5173\u95ed\u4fa7\u8fb9\u680f<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">closeSidebar<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">withoutAnimation<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    sidebar<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span>opened <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><br \/>\n    sidebar<span class=\"token punctuation\">.<\/span>value<span class=\"token punctuation\">.<\/span>withoutAnimation <span class=\"token operator\">&#061;<\/span> withoutAnimation<br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5207\u6362\u8bbe\u5907<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">toggleDevice<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">deviceType<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    device<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> deviceType<br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5207\u6362\u5168\u5c4f<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">toggleFullscreen<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>document<span class=\"token punctuation\">.<\/span>fullscreenElement<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      document<span class=\"token punctuation\">.<\/span>documentElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestFullscreen<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n      fullscreen<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>document<span class=\"token punctuation\">.<\/span>exitFullscreen<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        document<span class=\"token punctuation\">.<\/span><span class=\"token function\">exitFullscreen<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        fullscreen<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><\/p>\n<p>  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    sidebar<span class=\"token punctuation\">,<\/span><br \/>\n    device<span class=\"token punctuation\">,<\/span><br \/>\n    fullscreen<span class=\"token punctuation\">,<\/span><br \/>\n    toggleSidebar<span class=\"token punctuation\">,<\/span><br \/>\n    closeSidebar<span class=\"token punctuation\">,<\/span><br \/>\n    toggleDevice<span class=\"token punctuation\">,<\/span><br \/>\n    toggleFullscreen<br \/>\n  <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u80cc\u666f\u95ee\u9898&#xff1a;<br \/>\n\u9700\u8981\u7ba1\u7406\u5e94\u7528\u7684\u5168\u5c40\u72b6\u6001\u3002<br \/>\n\u65b9\u6848\u601d\u8003&#xff1a;<br \/>\n\u4f7f\u7528 Pinia \u4f5c\u4e3a\u72b6\u6001\u7ba1\u7406\u5de5\u5177\u3002<br \/>\n\u5177\u4f53\u5b9e\u73b0&#xff1a;<br \/>\n\u521b\u5efa Pinia \u5b9e\u4f8b&#xff1a;<br \/>\n\/\/ stores\/index.js<br \/>\nimport { createPinia } from piniaconst pinia  createPinia()export default pinia\/\/ main.js<br \/>\nimport { createApp } from vue<br \/>\nimport App<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[625,87],"topic":[],"class_list":["post-59574","post","type-post","status-publish","format-standard","hentry","category-server","tag-vue-js","tag-87"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/59574.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u80cc\u666f\u95ee\u9898&#xff1a; \u9700\u8981\u7ba1\u7406\u5e94\u7528\u7684\u5168\u5c40\u72b6\u6001\u3002 \u65b9\u6848\u601d\u8003&#xff1a; \u4f7f\u7528 Pinia \u4f5c\u4e3a\u72b6\u6001\u7ba1\u7406\u5de5\u5177\u3002 \u5177\u4f53\u5b9e\u73b0&#xff1a; \u521b\u5efa Pinia \u5b9e\u4f8b&#xff1a; \/\/ stores\/index.js import { createPinia } from piniaconst pinia createPinia()export default pinia\/\/ main.js import { createApp } from vue import App\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/59574.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-13T22:17:00+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/59574.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/59574.html\",\"name\":\"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-01-13T22:17:00+00:00\",\"dateModified\":\"2026-01-13T22:17:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/59574.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/59574.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/59574.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/59574.html","og_locale":"zh_CN","og_type":"article","og_title":"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u80cc\u666f\u95ee\u9898&#xff1a; \u9700\u8981\u7ba1\u7406\u5e94\u7528\u7684\u5168\u5c40\u72b6\u6001\u3002 \u65b9\u6848\u601d\u8003&#xff1a; \u4f7f\u7528 Pinia \u4f5c\u4e3a\u72b6\u6001\u7ba1\u7406\u5de5\u5177\u3002 \u5177\u4f53\u5b9e\u73b0&#xff1a; \u521b\u5efa Pinia \u5b9e\u4f8b&#xff1a; \/\/ stores\/index.js import { createPinia } from piniaconst pinia createPinia()export default pinia\/\/ main.js import { createApp } from vue import App","og_url":"https:\/\/www.wsisp.com\/helps\/59574.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-01-13T22:17:00+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/59574.html","url":"https:\/\/www.wsisp.com\/helps\/59574.html","name":"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-01-13T22:17:00+00:00","dateModified":"2026-01-13T22:17:00+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/59574.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/59574.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/59574.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Vue\u2014\u2014Vue3 + Vite \u72b6\u6001\u7ba1\u7406\u7bc7 \u4e4b\u3010Pinia \u72b6\u6001\u7ba1\u7406\u67b6\u6784\u3011"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/59574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=59574"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/59574\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=59574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=59574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=59574"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=59574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}