{"id":79881,"date":"2026-03-03T15:50:57","date_gmt":"2026-03-03T07:50:57","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/79881.html"},"modified":"2026-03-03T15:50:57","modified_gmt":"2026-03-03T07:50:57","slug":"vue%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e6%89%ab%e7%9b%b2%e7%af%87%ef%bc%9a%e5%a6%82%e4%bd%95%e8%ae%be%e8%ae%a1%e4%b8%80%e4%b8%aa%e5%90%88%e7%90%86%e7%9a%84%e5%85%a8%e5%b1%80%e7%8a%b6%e6%80%81","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/79881.html","title":{"rendered":"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e"},"content":{"rendered":"<p>\u540c\u5b66\u4eec\u597d&#xff0c;\u6211\u662f Eugene&#xff08;\u5c24\u91d1&#xff09;&#xff0c;\u4e00\u4e2a\u62e5\u6709\u591a\u5e74\u4e2d\u540e\u53f0\u5f00\u53d1\u7ecf\u9a8c\u7684\u524d\u7aef\u5de5\u7a0b\u5e08~<\/p>\n<p>&#xff08;Eugene \u53d1\u97f3\u5f88\u7b80\u5355&#xff0c;\/ju\u02d0\u02c8d\u0292i\u02d0n\/&#xff0c;\u5927\u5bb6\u600e\u4e48\u987a\u53e3\u600e\u4e48\u53eb\u5c31\u597d&#xff09;<\/p>\n<p>\u4f60\u662f\u5426\u4e5f\u6709\u8fc7&#xff1a;\u660e\u660e\u5b66\u8fc7\u5f88\u591a\u6280\u672f&#xff0c;\u4e00\u5230\u5173\u952e\u65f6\u5019\u5374\u8bb2\u4e0d\u51fa\u6765\u3001\u751a\u81f3\u5199\u4e0d\u51fa\u6765&#xff1f;<\/p>\n<p>\u4f60\u662f\u5426\u4e5f\u66fe\u6000\u7591\u81ea\u5df1&#xff0c;\u662f\u4e0d\u662f\u592a\u7b28\u4e86&#xff0c;\u660e\u660e\u611f\u89c9\u4f1a&#xff0c;\u5374\u603b\u5dee\u4e00\u53e3\u6c14&#xff1f;<\/p>\n<p>\u5c31\u7b97\u60f3\u6c89\u4e0b\u5fc3\u4ece\u5934\u68b3\u7406&#xff0c;\u53ef\u5de5\u4f5c\u90a3\u4e48\u5fd9&#xff0c;\u56de\u5bb6\u8fd8\u8981\u966a\u4f34\u5bb6\u4eba\u3002<\/p>\n<p>\u4e00\u5929\u53ea\u670924\u5c0f\u65f6&#xff0c;\u65f6\u95f4\u6c38\u8fdc\u4e0d\u591f\u7528&#xff0c;\u5e38\u5e38\u611f\u5230\u529b\u4e0d\u4ece\u5fc3\u3002<\/p>\n<p>\u6280\u672f\u884c\u4e1a&#xff0c;\u672c\u5c31\u662f\u9006\u6c34\u884c\u821f&#xff0c;\u4e0d\u8fdb\u5219\u9000\u3002<\/p>\n<p>\u5982\u679c\u4f60\u4e5f\u6709\u540c\u6837\u7684\u56f0\u6270&#xff0c;\u522b\u614c\u3002<\/p>\n<p>\u4ece\u73b0\u5728\u5f00\u59cb&#xff0c;\u8ddf\u7740\u6211\u4e00\u8d77\u5fc3\u6001\u5f52\u96f6&#xff0c;\u5229\u7528\u788e\u7247\u65f6\u95f4&#xff0c;\u6765\u4e00\u6b21\u5f7b\u5f7b\u5e95\u5e95\u7684\u57fa\u7840\u626b\u76f2\u3002<\/p>\n<p>\u8fd9\u4e00\u6b21&#xff0c;\u6211\u4eec\u4e00\u8d77\u6162\u6162\u6765&#xff0c;\u624e\u624e\u5b9e\u5b9e\u53d8\u5f3a\u3002<\/p>\n<p>\u4e0d\u641e\u82b1\u91cc\u80e1\u54e8\u7684\u7406\u8bba\u5806\u780c&#xff0c;\u53ea\u5206\u4eab\u770b\u5f97\u61c2\u3001\u7528\u5f97\u4e0a\u7684\u524d\u7aef\u5e72\u8d27&#xff0c;<\/p>\n<p>\u54b1\u4eec\u4e00\u8d77\u7a33\u6b65\u79ef\u7d2f&#xff0c;\u771f\u6b63\u6446\u8131&#034;\u9762\u5411\u641c\u7d22\u5f15\u64ce\u5199\u4ee3\u7801&#034;\u7684\u5c34\u5c2c\u3002<\/p>\n<hr \/>\n<h3>\u4e00\u3001\u5148\u641e\u6e05\u695a&#xff1a;\u4ec0\u4e48\u662f\u5168\u5c40\u72b6\u6001&#xff1f;\u4e3a\u4ec0\u4e48\u8981\u8bbe\u8ba1&#xff1f;<\/h3>\n<h4>1.1 \u4e00\u53e5\u8bdd\u7406\u89e3<\/h4>\n<p>\u5168\u5c40\u72b6\u6001&#xff1a;\u591a\u4e2a\u9875\u9762\u3001\u591a\u4e2a\u7ec4\u4ef6\u90fd\u9700\u8981\u8bfb\u53d6\u548c\u4fee\u6539\u7684\u540c\u4e00\u4efd\u6570\u636e&#xff0c;\u653e\u5728\u4e00\u4e2a\u7edf\u4e00\u7684\u201c\u4ed3\u5e93\u201d\u91cc\u7edf\u4e00\u7ba1\u7406\u3002<\/p>\n<p>\u5178\u578b\u573a\u666f&#xff1a;<\/p>\n<ul>\n<li>\u767b\u5f55\u540e\u7684\u7528\u6237\u4fe1\u606f&#xff0c;\u5f88\u591a\u9875\u9762\u90fd\u8981\u7528<\/li>\n<li>\u6309\u94ae\/\u83dc\u5355\u6743\u9650&#xff0c;\u51b3\u5b9a\u80fd\u5426\u663e\u793a\u6216\u64cd\u4f5c<\/li>\n<li>\u5b57\u5178\u6570\u636e&#xff08;\u5982\u6027\u522b\u3001\u72b6\u6001\u3001\u7c7b\u578b&#xff09;&#xff0c;\u4e0b\u62c9\u6846\u5230\u5904\u7528\u5230<\/li>\n<li>\u4fa7\u8fb9\u680f\u662f\u5426\u6298\u53e0\u3001\u4e3b\u9898\u8272\u7b49\u5e03\u5c40\u914d\u7f6e<\/li>\n<\/ul>\n<p>\u5982\u679c\u6bcf\u4e2a\u7ec4\u4ef6\u5404\u81ea\u53d1\u8bf7\u6c42\u3001\u5404\u81ea\u5b58\u4e00\u4efd&#xff0c;\u5c31\u4f1a&#xff1a;<\/p>\n<ul>\n<li>\u91cd\u590d\u8bf7\u6c42\u3001\u6d6a\u8d39\u8d44\u6e90<\/li>\n<li>\u6570\u636e\u4e0d\u540c\u6b65&#xff0c;\u5bb9\u6613\u51fa bug<\/li>\n<li>\u5237\u65b0\u9875\u9762\u540e\u6570\u636e\u4e22\u5931<\/li>\n<\/ul>\n<p>\u628a\u8fd9\u4e9b\u6570\u636e\u62bd\u6210\u5168\u5c40\u72b6\u6001\u6811\u7edf\u4e00\u7ba1\u7406&#xff0c;\u53ef\u4ee5&#xff1a;<\/p>\n<ul>\n<li>\u53ea\u8bf7\u6c42\u4e00\u6b21&#xff0c;\u591a\u5904\u590d\u7528<\/li>\n<li>\u5355\u4e00\u6570\u636e\u6e90&#xff0c;\u66f4\u65b0\u4e00\u81f4<\/li>\n<li>\u6301\u4e45\u5316\u540e\u5237\u65b0\u4e5f\u80fd\u6062\u590d<\/li>\n<\/ul>\n<h4>1.2 \u7528 Vuex \/ Pinia \u505a\u4ec0\u4e48&#xff1f;<\/h4>\n<ul>\n<li>Vuex&#xff1a;Vue 2 \u5b98\u65b9\u72b6\u6001\u5e93&#xff0c;\u6982\u5ff5\u591a&#xff08;state\u3001mutation\u3001action\u3001module&#xff09;\u3002<\/li>\n<li>Pinia&#xff1a;Vue 3 \u5b98\u65b9\u63a8\u8350&#xff0c;API \u66f4\u7b80\u6d01&#xff0c;\u652f\u6301 TypeScript\u3002<\/li>\n<\/ul>\n<p>\u540e\u9762\u793a\u4f8b\u4f1a\u4ee5 Pinia \u4e3a\u4e3b&#xff0c;\u601d\u8def\u548c\u6a21\u5757\u5212\u5206\u540c\u6837\u9002\u7528\u4e8e Vuex\u3002<\/p>\n<hr \/>\n<h3>\u4e8c\u3001\u6574\u4f53\u8bbe\u8ba1\u601d\u8def&#xff1a;\u6309\u4e1a\u52a1\u57df\u62c6\u5206\u6a21\u5757<\/h3>\n<p>\u4e0d\u8981\u628a\u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u5168\u90e8\u585e\u8fdb\u4e00\u4e2a store \u91cc&#xff0c;\u5efa\u8bae\u6309\u4e1a\u52a1\u57df\u62c6\u6210\u6a21\u5757&#xff1a;<\/p>\n<p>store\/<br \/>\n\u251c\u2500\u2500 modules\/<br \/>\n\u2502   \u251c\u2500\u2500 user.ts        # \u7528\u6237\u4fe1\u606f<br \/>\n\u2502   \u251c\u2500\u2500 permission.ts  # \u6743\u9650&#xff08;\u8def\u7531\u3001\u6309\u94ae&#xff09;<br \/>\n\u2502   \u251c\u2500\u2500 dict.ts        # \u5b57\u5178<br \/>\n\u2502   \u2514\u2500\u2500 layout.ts      # \u5e03\u5c40\u914d\u7f6e<br \/>\n\u251c\u2500\u2500 index.ts           # \u5165\u53e3&#xff0c;\u6302\u8f7d\u6240\u6709\u6a21\u5757<\/p>\n<p>\u539f\u5219&#xff1a;<\/p>\n<ul>\n<li>\u6bcf\u4e2a\u6a21\u5757\u53ea\u8d1f\u8d23\u4e00\u7c7b\u6570\u636e<\/li>\n<li>\u6a21\u5757\u95f4\u5c3d\u91cf\u5c11\u8026\u5408<\/li>\n<li>\u8de8\u6a21\u5757\u903b\u8f91\u653e\u5728 action \u91cc\u6216\u5355\u72ec\u7684 service \u4e2d<\/li>\n<\/ul>\n<hr \/>\n<h3>\u4e09\u3001\u6a21\u5757\u4e00&#xff1a;\u7528\u6237\u72b6\u6001&#xff08;User&#xff09;<\/h3>\n<h4>3.1 \u5b58\u4ec0\u4e48&#xff1f;<\/h4>\n<ul>\n<li>\u57fa\u672c\u4fe1\u606f&#xff1a;id\u3001username\u3001nickname\u3001avatar\u3001email \u7b49<\/li>\n<li>\u767b\u5f55\u6001&#xff1a;token\u3001tokenExpire<\/li>\n<li>\u7ec4\u7ec7\u4fe1\u606f&#xff08;\u82e5\u6709\u591a\u79df\u6237&#xff09;&#xff1a;orgId\u3001orgName \u7b49<\/li>\n<\/ul>\n<h4>3.2 \u57fa\u672c\u7ed3\u6784\u793a\u4f8b<\/h4>\n<p><span class=\"token comment\">\/\/ store\/modules\/user.ts<\/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><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">interface<\/span> <span class=\"token class-name\">UserInfo<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  id<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  username<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  nickname<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  avatar<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  email<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  phone<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n<span class=\"token punctuation\">}<\/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><br \/>\n  <span class=\"token function-variable function\">state<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    token<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;&#039;<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    userInfo<span class=\"token operator\">:<\/span> <span class=\"token keyword\">null<\/span> <span class=\"token keyword\">as<\/span> UserInfo <span class=\"token operator\">|<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u53ef\u9009&#xff1a;\u8bb0\u5f55\u767b\u5f55\u65f6\u95f4&#xff0c;\u7528\u4e8e token \u7eed\u671f\u5224\u65ad<\/span><br \/>\n    loginTime<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token builtin\">number<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  getters<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function-variable function\">isLoggedIn<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token operator\">!<\/span><span class=\"token operator\">!<\/span>state<span class=\"token punctuation\">.<\/span>token<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function-variable function\">displayName<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> state<span class=\"token punctuation\">.<\/span>userInfo<span class=\"token operator\">?.<\/span>nickname <span class=\"token operator\">||<\/span> state<span class=\"token punctuation\">.<\/span>userInfo<span class=\"token operator\">?.<\/span>username <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;&#039;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  actions<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">setToken<\/span><span class=\"token punctuation\">(<\/span>token<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>token <span class=\"token operator\">&#061;<\/span> token<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">setUserInfo<\/span><span class=\"token punctuation\">(<\/span>info<span class=\"token operator\">:<\/span> UserInfo <span class=\"token operator\">|<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>userInfo <span class=\"token operator\">&#061;<\/span> info<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">login<\/span><span class=\"token punctuation\">(<\/span>token<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">,<\/span> userInfo<span class=\"token operator\">:<\/span> UserInfo<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>token <span class=\"token operator\">&#061;<\/span> token<br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>userInfo <span class=\"token operator\">&#061;<\/span> userInfo<br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loginTime <span class=\"token operator\">&#061;<\/span> Date<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">logout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>token <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;&#039;<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>userInfo <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loginTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/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\">\/\/ \u6301\u4e45\u5316&#xff1a;token \u548c userInfo \u8981\u6301\u4e45\u5316&#xff0c;\u5237\u65b0\u540e\u8fd8\u80fd\u7528<\/span><br \/>\n  persist<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    key<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;user-store&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    storage<span class=\"token operator\">:<\/span> localStorage<span class=\"token punctuation\">,<\/span><br \/>\n    paths<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">&#039;token&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;userInfo&#039;<\/span><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<h4>3.3 \u5e38\u89c1\u5751\u70b9<\/h4>\n<table>\n<tr>\u5751\u73b0\u8c61\u5efa\u8bae<\/tr>\n<tbody>\n<tr>\n<td>token \u4e0d\u6301\u4e45\u5316<\/td>\n<td>\u5237\u65b0\u9875\u9762\u5c31\u6389\u7ebf<\/td>\n<td>\u7528 pinia-plugin-persistedstate \u7b49\u6301\u4e45\u5316 token<\/td>\n<\/tr>\n<tr>\n<td>\u654f\u611f\u4fe1\u606f\u8fdb localStorage<\/td>\n<td>token \u53ef\u80fd\u88ab XSS \u5229\u7528<\/td>\n<td>\u654f\u611f\u7cfb\u7edf\u7528 httpOnly cookie \u5b58 token<\/td>\n<\/tr>\n<tr>\n<td>userInfo \u548c token \u4e0d\u540c\u6b65<\/td>\n<td>\u6709 token \u6ca1 userInfo&#xff0c;\u6216\u53cd\u4e4b<\/td>\n<td>\u767b\u5f55\u65f6\u4e00\u8d77\u8bbe\u7f6e&#xff1b;\u9000\u51fa\u65f6\u4e00\u8d77\u6e05\u7a7a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u56db\u3001\u6a21\u5757\u4e8c&#xff1a;\u6743\u9650\u72b6\u6001&#xff08;Permission&#xff09;<\/h3>\n<h4>4.1 \u5b58\u4ec0\u4e48&#xff1f;<\/h4>\n<ul>\n<li>\u8def\u7531\u6743\u9650&#xff1a;\u7528\u6237\u53ef\u8bbf\u95ee\u7684\u8def\u7531\/\u83dc\u5355&#xff0c;\u7528\u4e8e\u52a8\u6001\u8def\u7531\u548c\u4fa7\u8fb9\u680f<\/li>\n<li>\u6309\u94ae\u6743\u9650&#xff1a;\u5982 user:add\u3001user:edit&#xff0c;\u7528\u4e8e\u63a7\u5236\u6309\u94ae\u663e\u9690<\/li>\n<\/ul>\n<h4>4.2 \u5e38\u89c1\u540e\u7aef\u6570\u636e\u7ed3\u6784&#xff08;\u793a\u4f8b&#xff09;<\/h4>\n<p><span class=\"token comment\">\/\/ \u540e\u7aef\u53ef\u80fd\u8fd4\u56de\u7684\u6743\u9650\u7ed3\u6784<\/span><br \/>\n<span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token string-property property\">&#034;menus&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n    <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token string-property property\">&#034;path&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\/user&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;name&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\u7528\u6237\u7ba1\u7406&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n      <span class=\"token string-property property\">&#034;children&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token punctuation\">{<\/span> <span class=\"token string-property property\">&#034;path&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\/user\/list&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-property property\">&#034;name&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\u7528\u6237\u5217\u8868&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-property property\">&#034;perms&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">&#034;user:list&#034;<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">{<\/span> <span class=\"token string-property property\">&#034;path&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\/user\/add&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-property property\">&#034;name&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\u65b0\u589e\u7528\u6237&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string-property property\">&#034;perms&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">&#034;user:add&#034;<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token punctuation\">]<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token string-property property\">&#034;permissions&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">&#034;user:list&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;user:add&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;user:edit&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#034;user:delete&#034;<\/span><span class=\"token punctuation\">]<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>4.3 \u6743\u9650 Store \u793a\u4f8b<\/h4>\n<p><span class=\"token comment\">\/\/ store\/modules\/permission.ts<\/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><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">interface<\/span> <span class=\"token class-name\">MenuItem<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  path<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  name<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  icon<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  perms<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n  children<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> MenuItem<span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> usePermissionStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">defineStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;permission&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token function-variable function\">state<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    menus<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token keyword\">as<\/span> MenuItem<span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    permissions<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span>  <span class=\"token comment\">\/\/ \u6241\u5e73\u5316\u7684\u6743\u9650\u7801&#xff0c;\u7528\u4e8e\u6309\u94ae\u7ea7\u63a7\u5236<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  getters<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function-variable function\">hasPermission<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span>code<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u8d85\u7ea7\u7ba1\u7406\u5458\u901a\u5e38\u62e5\u6709\u6240\u6709\u6743\u9650<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">.<\/span>permissions<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;*&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">true<\/span><br \/>\n      <span class=\"token keyword\">return<\/span> state<span class=\"token punctuation\">.<\/span>permissions<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span>code<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>  actions<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">setMenus<\/span><span class=\"token punctuation\">(<\/span>menus<span class=\"token operator\">:<\/span> MenuItem<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\">this<\/span><span class=\"token punctuation\">.<\/span>menus <span class=\"token operator\">&#061;<\/span> menus<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">setPermissions<\/span><span class=\"token punctuation\">(<\/span>perms<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/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\">this<\/span><span class=\"token punctuation\">.<\/span>permissions <span class=\"token operator\">&#061;<\/span> perms<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">reset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>menus <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>permissions <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n    <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<h4>4.4 \u6309\u94ae\u7ea7\u6743\u9650&#xff1a;\u81ea\u5b9a\u4e49\u6307\u4ee4<\/h4>\n<p><span class=\"token comment\">\/\/ directives\/permission.ts<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token punctuation\">{<\/span> Directive <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> <span class=\"token punctuation\">{<\/span> usePermissionStore <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/store\/modules\/permission&#039;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> vPermission<span class=\"token operator\">:<\/span> Directive <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token function\">mounted<\/span><span class=\"token punctuation\">(<\/span>el<span class=\"token punctuation\">,<\/span> binding<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> permissionStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">usePermissionStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> code <span class=\"token operator\">&#061;<\/span> binding<span class=\"token punctuation\">.<\/span>value <span class=\"token keyword\">as<\/span> <span class=\"token builtin\">string<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>code<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>permissionStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">hasPermission<\/span><span class=\"token punctuation\">(<\/span>code<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u65e0\u6743\u9650&#xff1a;\u76f4\u63a5\u79fb\u9664 DOM<\/span><br \/>\n      el<span class=\"token punctuation\">.<\/span>parentNode<span class=\"token operator\">?.<\/span><span class=\"token function\">removeChild<\/span><span class=\"token punctuation\">(<\/span>el<span class=\"token punctuation\">)<\/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 comment\">\/\/ main.ts \u6216\u5165\u53e3\u6587\u4ef6\u6ce8\u518c<\/span><br \/>\n<span class=\"token comment\">\/\/ app.directive(&#039;permission&#039;, vPermission)<\/span><\/p>\n<p>\u4f7f\u7528\u793a\u4f8b&#xff1a;<\/p>\n<p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-button<\/span> <span class=\"token attr-name\">v-permission<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span><span class=\"token punctuation\">&#039;<\/span>user:add&#039;<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u65b0\u589e\u7528\u6237<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-button<\/span> <span class=\"token attr-name\">v-permission<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span><span class=\"token punctuation\">&#039;<\/span>user:edit&#039;<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u7f16\u8f91<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<h4>4.5 \u5e38\u89c1\u5751\u70b9<\/h4>\n<table>\n<tr>\u5751\u73b0\u8c61\u5efa\u8bae<\/tr>\n<tbody>\n<tr>\n<td>\u5237\u65b0\u540e\u6743\u9650\u4e22\u5931<\/td>\n<td>\u4fa7\u8fb9\u680f\u7a7a\u4e86\u6216\u8def\u7531 403<\/td>\n<td>\u767b\u5f55\u540e\u628a menus\/permissions \u6301\u4e45\u5316&#xff0c;\u6216\u5237\u65b0\u540e\u91cd\u65b0\u62c9\u53d6<\/td>\n<\/tr>\n<tr>\n<td>\u6307\u4ee4\u5728 store \u672a\u521d\u59cb\u5316\u65f6\u6267\u884c<\/td>\n<td>\u62a5\u9519\u6216\u8bef\u5224<\/td>\n<td>\u5728\u8def\u7531\u5b88\u536b\u4e2d\u786e\u4fdd\u6743\u9650\u5df2\u52a0\u8f7d\u518d\u6e32\u67d3\u9875\u9762<\/td>\n<\/tr>\n<tr>\n<td>\u6743\u9650\u7801\u4e0d\u7edf\u4e00<\/td>\n<td>\u524d\u7aef user:add \u540e\u7aef user_add<\/td>\n<td>\u548c\u540e\u7aef\u7ea6\u5b9a\u7edf\u4e00\u683c\u5f0f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u4e94\u3001\u6a21\u5757\u4e09&#xff1a;\u5b57\u5178\u72b6\u6001&#xff08;Dict&#xff09;<\/h3>\n<h4>5.1 \u5b58\u4ec0\u4e48&#xff1f;<\/h4>\n<p>\u4e0b\u62c9\u9009\u9879\u3001\u72b6\u6001\u6587\u6848\u7b49&#xff1a;\u5982 gender&#xff08;\u7537\/\u5973&#xff09;\u3001userStatus&#xff08;\u542f\u7528\/\u7981\u7528&#xff09;\u7b49\u3002<\/p>\n<h4>5.2 \u8bbe\u8ba1\u8981\u70b9<\/h4>\n<ul>\n<li>\u6309 dictType \u5206\u7ec4\u5b58\u50a8<\/li>\n<li>\u652f\u6301\u61d2\u52a0\u8f7d&#xff08;\u7528\u5230\u518d\u8bf7\u6c42&#xff09;<\/li>\n<li>\u9002\u5f53\u7f13\u5b58&#xff0c;\u51cf\u5c11\u8bf7\u6c42<\/li>\n<\/ul>\n<h4>5.3 \u5b57\u5178 Store \u793a\u4f8b<\/h4>\n<p><span class=\"token comment\">\/\/ store\/modules\/dict.ts<\/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><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">interface<\/span> <span class=\"token class-name\">DictItem<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  label<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><br \/>\n  value<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span> <span class=\"token operator\">|<\/span> <span class=\"token builtin\">number<\/span><br \/>\n  <span class=\"token punctuation\">[<\/span>key<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">any<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> useDictStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">defineStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;dict&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token function-variable function\">state<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ dictType -&gt; DictItem[]<\/span><br \/>\n    dictMap<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">as<\/span> Record<span class=\"token operator\">&lt;<\/span><span class=\"token builtin\">string<\/span><span class=\"token punctuation\">,<\/span> DictItem<span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u8bb0\u5f55\u54ea\u4e9b\u7c7b\u578b\u5df2\u52a0\u8f7d\u8fc7&#xff0c;\u907f\u514d\u91cd\u590d\u8bf7\u6c42<\/span><br \/>\n    loadedTypes<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  getters<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function-variable function\">getDict<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span>dictType<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/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> state<span class=\"token punctuation\">.<\/span>dictMap<span class=\"token punctuation\">[<\/span>dictType<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function-variable function\">getDictLabel<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span>dictType<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">,<\/span> value<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span> <span class=\"token operator\">|<\/span> <span class=\"token builtin\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">const<\/span> list <span class=\"token operator\">&#061;<\/span> state<span class=\"token punctuation\">.<\/span>dictMap<span class=\"token punctuation\">[<\/span>dictType<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n      <span class=\"token keyword\">const<\/span> item <span class=\"token operator\">&#061;<\/span> list<span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>d<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> d<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">&#061;&#061;&#061;<\/span> value<span class=\"token punctuation\">)<\/span><br \/>\n      <span class=\"token keyword\">return<\/span> item<span class=\"token operator\">?.<\/span>label <span class=\"token operator\">??<\/span> value<br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  actions<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">async<\/span> <span class=\"token function\">loadDict<\/span><span class=\"token punctuation\">(<\/span>dictType<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loadedTypes<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span>dictType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dictMap<span class=\"token punctuation\">[<\/span>dictType<span class=\"token punctuation\">]<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u5b9e\u9645\u9879\u76ee\u4e2d\u66ff\u6362\u4e3a\u4f60\u7684 API \u8bf7\u6c42<\/span><br \/>\n      <span class=\"token keyword\">const<\/span> res <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">\/api\/dict\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>dictType<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>r<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> r<span class=\"token punctuation\">.<\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n      <span class=\"token keyword\">const<\/span> list <span class=\"token operator\">&#061;<\/span> res<span class=\"token punctuation\">.<\/span>data <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>dictMap<span class=\"token punctuation\">[<\/span>dictType<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> list<br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loadedTypes<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>dictType<span class=\"token punctuation\">)<\/span><br \/>\n      <span class=\"token keyword\">return<\/span> list<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">setDict<\/span><span class=\"token punctuation\">(<\/span>dictType<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">,<\/span> list<span class=\"token operator\">:<\/span> DictItem<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\">this<\/span><span class=\"token punctuation\">.<\/span>dictMap<span class=\"token punctuation\">[<\/span>dictType<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> list<br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loadedTypes<span class=\"token punctuation\">.<\/span><span class=\"token function\">includes<\/span><span class=\"token punctuation\">(<\/span>dictType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>loadedTypes<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>dictType<span class=\"token punctuation\">)<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n    <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<h4>5.4 \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/h4>\n<p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-select<\/span> <span class=\"token attr-name\">v-model<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>form.gender<span class=\"token punctuation\">&#034;<\/span><\/span> <span class=\"token attr-name\">placeholder<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>\u8bf7\u9009\u62e9\u6027\u522b<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>el-option<\/span><br \/>\n      <span class=\"token attr-name\">v-for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>item in dictStore.getDict(&#039;gender&#039;)<span class=\"token punctuation\">&#034;<\/span><\/span><br \/>\n      <span class=\"token attr-name\">:key<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>item.value<span class=\"token punctuation\">&#034;<\/span><\/span><br \/>\n      <span class=\"token attr-name\">:label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>item.label<span class=\"token punctuation\">&#034;<\/span><\/span><br \/>\n      <span class=\"token attr-name\">:value<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>item.value<span class=\"token punctuation\">&#034;<\/span><\/span><br \/>\n    <span class=\"token punctuation\">\/&gt;<\/span><\/span><br \/>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>el-select<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n  <span class=\"token comment\">&lt;!&#8211; \u6216\u7528\u4e8e\u5c55\u793a&#xff1a;\u6839\u636e value \u663e\u793a label &#8211;&gt;<\/span><br \/>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>{{ dictStore.getDictLabel(&#039;gender&#039;, form.gender) }}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br \/>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>template<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">setup<\/span> <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">&#061;<\/span><span class=\"token punctuation\">&#034;<\/span>ts<span class=\"token punctuation\">&#034;<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><span class=\"token language-javascript\"><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> useDictStore <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;&#064;\/store\/modules\/dict&#039;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> onMounted <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\">const<\/span> dictStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useDictStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token function\">onMounted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/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\">await<\/span> dictStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">loadDict<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;gender&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p>\n<h4>5.5 \u5e38\u89c1\u5751\u70b9<\/h4>\n<table>\n<tr>\u5751\u73b0\u8c61\u5efa\u8bae<\/tr>\n<tbody>\n<tr>\n<td>\u4e00\u8fdb\u6765\u5c31\u62c9\u6240\u6709\u5b57\u5178<\/td>\n<td>\u9996\u5c4f\u6162<\/td>\n<td>\u6309\u9700 loadDict&#xff0c;\u7528\u5230\u518d\u52a0\u8f7d<\/td>\n<\/tr>\n<tr>\n<td>value \u7c7b\u578b\u4e0d\u4e00\u81f4<\/td>\n<td>\u9009\u9879\u9009\u4e86\u4e0d\u663e\u793a<\/td>\n<td>\u7edf\u4e00\u7528 string \u6216 number&#xff0c;\u548c\u63a5\u53e3\u4e00\u81f4<\/td>\n<\/tr>\n<tr>\n<td>\u5b57\u5178\u66f4\u65b0\u4e0d\u751f\u6548<\/td>\n<td>\u6539\u4e86\u540e\u53f0&#xff0c;\u524d\u7aef\u8fd8\u662f\u65e7\u6570\u636e<\/td>\n<td>\u63d0\u4f9b clearDict(type) \u6216\u5237\u65b0\u903b\u8f91&#xff0c;\u5fc5\u8981\u65f6\u767b\u51fa\u6e05\u7f13\u5b58<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u516d\u3001\u6a21\u5757\u56db&#xff1a;\u5e03\u5c40\u914d\u7f6e&#xff08;Layout&#xff09;<\/h3>\n<h4>6.1 \u5b58\u4ec0\u4e48&#xff1f;<\/h4>\n<p>\u4fa7\u8fb9\u680f\u6298\u53e0\u3001\u4e3b\u9898\u3001\u6807\u7b7e\u9875\u3001\u8bed\u8a00\u7b49&#xff0c;\u8fd9\u7c7b\u914d\u7f6e\u901a\u5e38\u9700\u8981\u6301\u4e45\u5316\u3002<\/p>\n<h4>6.2 \u5e03\u5c40 Store \u793a\u4f8b<\/h4>\n<p><span class=\"token comment\">\/\/ store\/modules\/layout.ts<\/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><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> useLayoutStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">defineStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;layout&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token function-variable function\">state<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    sidebarCollapsed<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    theme<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;light&#039;<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token string\">&#039;light&#039;<\/span> <span class=\"token operator\">|<\/span> <span class=\"token string\">&#039;dark&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u591a\u6807\u7b7e\u9875\u7684\u9875\u9762\u6808&#xff08;\u53ef\u9009&#xff09;<\/span><br \/>\n    visitedViews<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token punctuation\">{<\/span> path<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">;<\/span> title<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  getters<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function-variable function\">sidebarWidth<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span>state<span class=\"token punctuation\">.<\/span>sidebarCollapsed <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;64px&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;220px&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/p>\n<p>  actions<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">toggleSidebar<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>sidebarCollapsed <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>sidebarCollapsed<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">setTheme<\/span><span class=\"token punctuation\">(<\/span>theme<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;light&#039;<\/span> <span class=\"token operator\">|<\/span> <span class=\"token string\">&#039;dark&#039;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>theme <span class=\"token operator\">&#061;<\/span> theme<br \/>\n      document<span class=\"token punctuation\">.<\/span>documentElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">setAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;data-theme&#039;<\/span><span class=\"token punctuation\">,<\/span> theme<span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token function\">addVisitedView<\/span><span class=\"token punctuation\">(<\/span>route<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> path<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">;<\/span> meta<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> title<span class=\"token operator\">?<\/span><span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/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> view <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span> path<span class=\"token operator\">:<\/span> route<span class=\"token punctuation\">.<\/span>path<span class=\"token punctuation\">,<\/span> title<span class=\"token operator\">:<\/span> route<span class=\"token punctuation\">.<\/span>meta<span class=\"token operator\">?.<\/span>title <span class=\"token operator\">||<\/span> <span class=\"token string\">&#039;\u672a\u547d\u540d&#039;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token keyword\">const<\/span> exist <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>visitedViews<span class=\"token punctuation\">.<\/span><span class=\"token function\">find<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>v<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> v<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">&#061;&#061;&#061;<\/span> route<span class=\"token punctuation\">.<\/span>path<span class=\"token punctuation\">)<\/span><br \/>\n      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>exist<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>visitedViews<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>view<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>  persist<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    key<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;layout-store&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    storage<span class=\"token operator\">:<\/span> localStorage<span class=\"token punctuation\">,<\/span><br \/>\n    paths<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">&#039;sidebarCollapsed&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">&#039;theme&#039;<\/span><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<h4>6.3 \u5e38\u89c1\u5751\u70b9<\/h4>\n<table>\n<tr>\u5751\u73b0\u8c61\u5efa\u8bae<\/tr>\n<tbody>\n<tr>\n<td>\u6301\u4e45\u5316\u4f53\u79ef\u8fc7\u5927<\/td>\n<td>visitedViews \u592a\u591a<\/td>\n<td>\u53ea\u6301\u4e45\u5316 sidebarCollapsed\u3001theme \u7b49\u5fc5\u8981\u5b57\u6bb5<\/td>\n<\/tr>\n<tr>\n<td>\u4e3b\u9898\u5207\u6362\u95ea\u70c1<\/td>\n<td>\u5148\u4eae\u540e\u6697<\/td>\n<td>\u5728 HTML \u6700\u524d\u9762\u6839\u636e\u5b58\u50a8\u7684 theme \u8bbe\u7f6e class&#xff0c;\u6216\u505a\u9aa8\u67b6\u5c4f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>\u4e03\u3001\u6574\u4f53\u6302\u8f7d\u4e0e\u521d\u59cb\u5316\u987a\u5e8f<\/h3>\n<h4>7.1 Pinia \u5165\u53e3<\/h4>\n<p><span class=\"token comment\">\/\/ store\/index.ts<\/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><br \/>\n<span class=\"token keyword\">import<\/span> piniaPluginPersistedstate <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;pinia-plugin-persistedstate&#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><br \/>\npinia<span class=\"token punctuation\">.<\/span><span class=\"token function\">use<\/span><span class=\"token punctuation\">(<\/span>piniaPluginPersistedstate<span class=\"token punctuation\">)<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> pinia<\/p>\n<h4>7.2 \u8def\u7531\u5b88\u536b\u4e2d\u7684\u521d\u59cb\u5316\u6d41\u7a0b<\/h4>\n<p><span class=\"token comment\">\/\/ router\/index.ts<\/span><br \/>\nrouter<span class=\"token punctuation\">.<\/span><span class=\"token function\">beforeEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span>to<span class=\"token punctuation\">,<\/span> from<span class=\"token punctuation\">,<\/span> next<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> userStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useUserStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> permissionStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">usePermissionStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><\/p>\n<p>  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>userStore<span class=\"token punctuation\">.<\/span>isLoggedIn<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u5df2\u767b\u5f55&#xff1a;\u786e\u4fdd\u6743\u9650\u5df2\u52a0\u8f7d<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>permissionStore<span class=\"token punctuation\">.<\/span>permissions<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">await<\/span> <span class=\"token function\">fetchUserPermissions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token comment\">\/\/ \u8c03\u7528\u4f60\u7684\u63a5\u53e3<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u52a8\u6001\u6dfb\u52a0\u8def\u7531&#8230;<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        userStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">logout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token function\">next<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\/login&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token keyword\">return<\/span><br \/>\n      <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token function\">next<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/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>to<span class=\"token punctuation\">.<\/span>path <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token string\">&#039;\/login&#039;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token function\">next<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token function\">next<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\/login&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <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>\u9000\u51fa\u767b\u5f55\u65f6\u5efa\u8bae\u7edf\u4e00\u6e05\u7406&#xff1a;<\/p>\n<p><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">logout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> userStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useUserStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> permissionStore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">usePermissionStore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  userStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">logout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  permissionStore<span class=\"token punctuation\">.<\/span><span class=\"token function\">reset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n  router<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\/login&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<hr \/>\n<h3>\u516b\u3001\u5c0f\u7ed3&#xff1a;\u4e00\u4efd\u81ea\u68c0\u6e05\u5355<\/h3>\n<p>\u8bbe\u8ba1\u5168\u5c40\u72b6\u6001\u6811\u65f6&#xff0c;\u53ef\u4ee5\u6309\u4e0b\u9762\u68c0\u67e5&#xff1a;<\/p>\n<li>\u6309\u4e1a\u52a1\u57df\u62c6\u5206&#xff1a;user\u3001permission\u3001dict\u3001layout \u7b49\u72ec\u7acb\u6a21\u5757\u3002<\/li>\n<li>\u660e\u786e\u6301\u4e45\u5316\u8303\u56f4&#xff1a;token\u3001userInfo\u3001\u5e03\u5c40\u914d\u7f6e\u8981\u6301\u4e45\u5316&#xff1b;\u6743\u9650\u6309\u9700\u6301\u4e45\u5316\u6216\u767b\u5f55\u540e\u62c9\u53d6\u3002<\/li>\n<li>\u6743\u9650\u4e0e\u8def\u7531\u8054\u52a8&#xff1a;\u767b\u5f55\u540e\u52a0\u8f7d\u6743\u9650 \u2192 \u52a8\u6001\u8def\u7531 \u2192 \u518d\u6e32\u67d3\u9875\u9762\u3002<\/li>\n<li>\u5b57\u5178\u6309\u9700\u52a0\u8f7d&#xff1a;\u7528\u5230\u518d loadDict&#xff0c;\u5e76\u505a\u597d\u7f13\u5b58\u3002<\/li>\n<li>\u9000\u51fa\u65f6\u6e05\u7406&#xff1a;logout \u65f6\u91cd\u7f6e user\u3001permission \u7b49&#xff0c;\u907f\u514d\u810f\u6570\u636e\u3002<\/li>\n<hr \/>\n<p>\u5b66\u4e60\u672c\u5c31\u662f\u4e00\u573a\u6301\u4e45\u6218&#xff0c;\u4e0d\u9700\u8981\u6025\u7740\u4e00\u53e3\u5403\u6210\u80d6\u5b50\u3002\u54ea\u6015\u4eca\u5929\u4f60\u53ea\u8bb0\u4f4f\u4e86\u4e00\u70b9\u70b9&#xff0c;\u8fd9\u90fd\u662f\u5b9e\u6253\u5b9e\u7684\u8fdb\u6b65\u3002<\/p>\n<p>\u540e\u7eed\u6211\u8fd8\u4f1a\u7ee7\u7eed\u7528\u8fd9\u79cd\u5927\u767d\u8bdd\u3001\u8bb2\u5b9e\u6218\u65b9\u5f0f&#xff0c;\u5e26\u5927\u5bb6\u626b\u76f2\u66f4\u591a\u524d\u7aef\u57fa\u7840\u3002<\/p>\n<p>\u5173\u6ce8\u6211&#xff0c;\u4e0d\u8ff7\u8def&#xff0c;\u54b1\u4eec\u628a\u90a3\u4e9b\u66fe\u7ecf\u6a21\u7cca\u7684\u77e5\u8bc6\u70b9&#xff0c;\u4e00\u4e2a\u4e2a\u5f7b\u5e95\u641e\u6e05\u695a\u3002<\/p>\n<p>\u5982\u679c\u4f60\u89c9\u5f97\u8fd9\u7bc7\u5185\u5bb9\u5bf9\u4f60\u6709\u5e2e\u52a9&#xff0c;\u4e0d\u59a8\u70b9\u8d5e&#043;\u6536\u85cf&#xff0c;\u4e0b\u6b21\u5199\u4ee3\u7801\u5361\u58f3\u65f6&#xff0c;\u62ff\u51fa\u6765\u7ffb\u4e00\u7ffb&#xff0c;\u6bd4\u641c\u5f15\u64ce\u66f4\u9760\u8c31\u3002<\/p>\n<p>\u6211\u662f Eugene&#xff0c;\u4f60\u7684\u7535\u5b50\u5b66\u53cb&#xff0c;\u6211\u4eec\u4e0b\u4e00\u7bc7\u5e72\u8d27\u89c1&#xff5e;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u540c\u5b66\u4eec\u597d&#xff0c;\u6211\u662f Eugene&#xff08;\u5c24\u91d1&#xff09;&#xff0c;\u4e00\u4e2a\u62e5\u6709\u591a\u5e74\u4e2d\u540e\u53f0\u5f00\u53d1\u7ecf\u9a8c\u7684\u524d\u7aef\u5de5\u7a0b\u5e08~<br \/>\n&#xff08;Eugene \u53d1\u97f3\u5f88\u7b80\u5355&#xff0c;\/ju\u02d0\u02c8d\u0292i\u02d0n\/&#xff0c;\u5927\u5bb6\u600e\u4e48\u987a\u53e3\u600e\u4e48\u53eb\u5c31\u597d&#xff09;<br \/>\n\u4f60\u662f\u5426\u4e5f\u6709\u8fc7&#xff1a;\u660e\u660e\u5b66\u8fc7\u5f88\u591a\u6280\u672f&#xff0c;\u4e00\u5230\u5173\u952e\u65f6\u5019\u5374\u8bb2\u4e0d\u51fa\u6765\u3001\u751a\u81f3\u5199\u4e0d\u51fa\u6765&#xff1f;<br \/>\n\u4f60\u662f\u5426\u4e5f\u66fe\u6000\u7591\u81ea\u5df1&#xff0c;\u662f\u4e0d\u662f\u592a\u7b28\u4e86&#xff0c;\u660e\u660e\u611f\u89c9\u4f1a&#xff0c;\u5374\u603b\u5dee\u4e00<\/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":[187,625,87,885,176],"topic":[],"class_list":["post-79881","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-vue-js","tag-87","tag-885","tag-176"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e - \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\/79881.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u540c\u5b66\u4eec\u597d&#xff0c;\u6211\u662f Eugene&#xff08;\u5c24\u91d1&#xff09;&#xff0c;\u4e00\u4e2a\u62e5\u6709\u591a\u5e74\u4e2d\u540e\u53f0\u5f00\u53d1\u7ecf\u9a8c\u7684\u524d\u7aef\u5de5\u7a0b\u5e08~ &#xff08;Eugene \u53d1\u97f3\u5f88\u7b80\u5355&#xff0c;\/ju\u02d0\u02c8d\u0292i\u02d0n\/&#xff0c;\u5927\u5bb6\u600e\u4e48\u987a\u53e3\u600e\u4e48\u53eb\u5c31\u597d&#xff09; \u4f60\u662f\u5426\u4e5f\u6709\u8fc7&#xff1a;\u660e\u660e\u5b66\u8fc7\u5f88\u591a\u6280\u672f&#xff0c;\u4e00\u5230\u5173\u952e\u65f6\u5019\u5374\u8bb2\u4e0d\u51fa\u6765\u3001\u751a\u81f3\u5199\u4e0d\u51fa\u6765&#xff1f; \u4f60\u662f\u5426\u4e5f\u66fe\u6000\u7591\u81ea\u5df1&#xff0c;\u662f\u4e0d\u662f\u592a\u7b28\u4e86&#xff0c;\u660e\u660e\u611f\u89c9\u4f1a&#xff0c;\u5374\u603b\u5dee\u4e00\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/79881.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-03T07:50:57+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=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/79881.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/79881.html\",\"name\":\"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-03-03T07:50:57+00:00\",\"dateModified\":\"2026-03-03T07:50:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/79881.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/79881.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/79881.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e\"}]},{\"@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\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e - \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\/79881.html","og_locale":"zh_CN","og_type":"article","og_title":"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u540c\u5b66\u4eec\u597d&#xff0c;\u6211\u662f Eugene&#xff08;\u5c24\u91d1&#xff09;&#xff0c;\u4e00\u4e2a\u62e5\u6709\u591a\u5e74\u4e2d\u540e\u53f0\u5f00\u53d1\u7ecf\u9a8c\u7684\u524d\u7aef\u5de5\u7a0b\u5e08~ &#xff08;Eugene \u53d1\u97f3\u5f88\u7b80\u5355&#xff0c;\/ju\u02d0\u02c8d\u0292i\u02d0n\/&#xff0c;\u5927\u5bb6\u600e\u4e48\u987a\u53e3\u600e\u4e48\u53eb\u5c31\u597d&#xff09; \u4f60\u662f\u5426\u4e5f\u6709\u8fc7&#xff1a;\u660e\u660e\u5b66\u8fc7\u5f88\u591a\u6280\u672f&#xff0c;\u4e00\u5230\u5173\u952e\u65f6\u5019\u5374\u8bb2\u4e0d\u51fa\u6765\u3001\u751a\u81f3\u5199\u4e0d\u51fa\u6765&#xff1f; \u4f60\u662f\u5426\u4e5f\u66fe\u6000\u7591\u81ea\u5df1&#xff0c;\u662f\u4e0d\u662f\u592a\u7b28\u4e86&#xff0c;\u660e\u660e\u611f\u89c9\u4f1a&#xff0c;\u5374\u603b\u5dee\u4e00","og_url":"https:\/\/www.wsisp.com\/helps\/79881.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-03-03T07:50:57+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/79881.html","url":"https:\/\/www.wsisp.com\/helps\/79881.html","name":"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-03-03T07:50:57+00:00","dateModified":"2026-03-03T07:50:57+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/79881.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/79881.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/79881.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Vue\u72b6\u6001\u7ba1\u7406\u626b\u76f2\u7bc7\uff1a\u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u5408\u7406\u7684\u5168\u5c40\u72b6\u6001\u6811 | \u7528\u6237\u3001\u6743\u9650\u3001\u5b57\u5178\u3001\u5e03\u5c40\u914d\u7f6e"}]},{"@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\/79881","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=79881"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/79881\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=79881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=79881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=79881"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=79881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}