[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fvue-using-url-to-store-state-in-vue":3,"surround:\u002Fposts\u002F2024\u002Fvue-using-url-to-store-state-in-vue":148},{"id":4,"title":5,"body":6,"canonical":122,"categories":123,"date":125,"description":52,"draft":126,"extension":127,"image":128,"meta":129,"navigation":130,"path":131,"permalink":132,"readingTime":133,"recommend":132,"references":138,"seo":141,"sitemap":142,"stem":145,"tags":146,"type":132,"updated":125,"__hash__":147},"content\u002Fposts\u002F2024\u002Fvue-using-URL-to-store-state-in-vue.md","【翻译】在 Vue 中使用 URL 存储状态",{"type":7,"value":8,"toc":116},"minimark",[9,20,36,43,50,53,57,60,70,73,81,84,90,93,101,104,110,113],[10,11,12,13,19],"p",{},"受到 Lee Robinson 关于在 React \u002F Next.js 应用程序中使用 URL 存储状态的帖子的启发（您可以查看",[14,15,16],"a",{"href":16,"rel":17},"https:\u002F\u002Fx.com\u002Fleeerob\u002Fstatus\u002F1708280997488333078?s=20",[18],"nofollow"," ），我决定写这篇文章我将向您展示如何使用 URL 来保存状态。",[10,21,22,23,27,28,31,32,35],{},"通常，开发人员（包括我自己：D）使用 ",[24,25,26],"code",{"code":26},"ref()"," 、 ",[24,29,30],{"code":30},"reactive()"," 甚至 ",[24,33,34],{"code":34},"computed()"," 来存储可以通过 URL 查询或参数轻松处理的状态。",[10,37,38],{},[39,40],"img",{"alt":41,"src":42},"Using URL to Store State in Vue.jpeg","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F679adb282bba4-78.webp",[10,44,45,46],{},"来源： ",[14,47,48],{"href":48,"rel":49},"https:\u002F\u002Fd186loudes4jlv.cloudfront.net\u002Fhttp\u002Fimages\u002Fquery_string_components.png",[18],[10,51,52],{},"在本文中，我想向您展示如何在 Vue 应用程序中利用这个强大的浏览器原生功能 🚀",[54,55,56],"h2",{"id":56},"代码",[10,58,59],{},"要在 Vue 应用程序中使用查询参数，最简单的方法是使用 Vue Router 的 push 方法：",[61,62,68],"pre",{"className":63,"code":65,"language":66,"meta":67},[64],"language-html","\u003Cscript lang=\"ts\" setup>\n  import { useRouter } from \"vue-router\"\n  const { push } = useRouter()\n\u003C\u002Fscript>\n","html","",[24,69,65],{"__ignoreMap":67},[10,71,72],{},"稍后可以在发生某些事件（例如单击按钮）后在应用程序中使用此路由器方法，将状态保存到 URL 查询参数：",[61,74,79],{"className":75,"code":77,"language":78,"meta":67},[76],"language-ts","function saveUserNameToQuery(name: string) {\n    push({\n        query: {\n            username: name,\n        },\n    })\n}\n","ts",[24,80,77],{"__ignoreMap":67},[10,82,83],{},"要仅更改某些查询参数，同时将其余查询参数保持在相同状态，请使用以下命令：",[61,85,88],{"className":86,"code":87,"language":78,"meta":67},[76],"const { currentRoute, push } = useRouter()\n\nfunction updateQueryState(parameter: string, value: string) {\n    push({\n        query: {\n            ...currentRoute.value.query,\n            [parameter]: value,\n        },\n    })\n}\n",[24,89,87],{"__ignoreMap":67},[10,91,92],{},"要在某些条件后重置查询参数，您可以使用以下方法：",[61,94,99],{"className":95,"code":97,"language":98,"meta":67},[96],"language-js","function resetQuery() {\n    push({\n        query: {},\n    })\n}\n","js",[24,100,97],{"__ignoreMap":67},[10,102,103],{},"您可以使用 Vue Router 做更多的事情，但我想展示这一点，因为我最近使用它来开发一项新功能和一个全新的项目。",[10,105,106],{},[14,107,108],{"href":108,"rel":109},"https:\u002F\u002Frouter.vuejs.org\u002F",[18],[54,111,112],{"id":112},"概括",[10,114,115],{},"就是这样！您已成功学习如何使用 Vue Router 轻松修改 URL 状态并更新查询参数。这是一个非常有用的功能，我每天都在使用，强烈建议您尝试:)",{"title":67,"searchDepth":117,"depth":117,"links":118},4,[119,121],{"id":56,"depth":120,"text":56},2,{"id":112,"depth":120,"text":112},"https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fusing-url-to-store-state-in-vue-275c",[124],"译","2024-12-17 15:39:05",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Fvue-using-URL-to-store-state-in-vue.jpg",{},true,"\u002Fposts\u002F2024\u002Fvue-using-url-to-store-state-in-vue",null,{"text":134,"minutes":135,"time":136,"words":137},"3 min read",2.11,126600,422,[139],{"title":140,"link":122},"Using URL to store state in Vue",{"title":5,"description":52},{"loc":131,"images":143},[144],{"loc":42},"posts\u002F2024\u002Fvue-using-URL-to-store-state-in-vue",[],"XsJK8rObhUivzlKln4hV7_U680d-4G-Dd2pN6Ik78d8",[149,154],{"title":150,"path":151,"stem":152,"date":153,"type":132,"children":-1},"【翻译】Vue 可组合项的良好实践和设计模式","\u002Fposts\u002F2024\u002Fvue-good-practices-and-design-patterns-for-vue-composables","posts\u002F2024\u002Fvue-good-practices-and-design-patterns-for-vue-composables","2024-12-15 13:38:52",{"title":155,"path":156,"stem":157,"date":158,"type":159,"children":-1},"心经","\u002Fposts\u002F2024\u002Fthe-heart-channel","posts\u002F2024\u002FThe-heart-channel","2024-12-18 10:43:19","story",1789642591179]