企业官网建设流程全解析

c做项目的网站,建设网站号码是多少,怎么做国外游戏下载网站,网站建设net接口❤ 写在前面 如果觉得对你有帮助的话#xff0c;点个小❤❤ 吧#xff0c;你的支持是对我最大的鼓励~ 个人独立开发wx小程序#xff0c;感谢支持#xff01; 大家好#xff01;今天我们来聊聊Vue开发中一个既重要又有趣的话题——状态持久化。你是不是也遇到过这样的烦恼…❤ 写在前面如果觉得对你有帮助的话点个小❤❤ 吧你的支持是对我最大的鼓励~个人独立开发wx小程序感谢支持大家好今天我们来聊聊Vue开发中一个既重要又有趣的话题——状态持久化。你是不是也遇到过这样的烦恼用户登录后刷新页面又得重新登录购物车里的商品一刷新就不见了别担心看完这篇博客这些都会成为过去式 先来讲个故事Vue组件们的“共享难题”想象一下你有一套房子Vue应用里面有多个房间组件。每个房间都有自己的小柜子局部状态。但问题来了客厅的电视遥控器该放在哪个房间全家人的钥匙该挂在哪里这就是我们需要中央状态管理的原因// 以前的方式组件间传来传去太混乱// ComponentA → ComponentB → ComponentC → ComponentD // 现在的方式大家都用一个共享仓库// ComponentA → Store ← ComponentB ✅ Vuex vs Pinia新老管家的对比Vuex - 经验丰富的老管家// Vuex的典型结构conststorenewVuex.Store({state:{count:0},mutations:{increment(state){state.count}},actions:{asyncIncrement({commit}){/* 异步操作 */}},getters:{doubleCount:statestate.count*2}})Pinia - 更轻巧的新管家Vue官方推荐// Pinia更加简洁直观exportconstuseCounterStoredefineStore(counter,{state:()({count:0}),actions:{increment(){this.count}},getters:{doubleCount:(state)state.count*2}})是否组件 Component需要修改状态?调用 Action直接读取 State/GetterAction 处理业务逻辑调用 MutationVuex专属Mutation 修改 State直接修改 StatePinia方式State 更新响应式更新所有相关组件 本地存储同步给状态加个“保险柜”现在到了最精彩的部分如何让这些状态在页面刷新后依然存在方案1手动同步基础版// 简单的localStorage操作constuseAuthStoredefineStore(auth,{state:()({token:localStorage.getItem(token)||null}),actions:{login(token){this.tokentoken localStorage.setItem(token,token)// 手动保存},logout(){this.tokennulllocalStorage.removeItem(token)// 手动清除}}})缺点每个状态都要手动处理容易遗漏方案2自动同步进阶版这里介绍两个超好用的插件对于Vuexvuex-persistedstateimportcreatePersistedStatefromvuex-persistedstateconststorenewVuex.Store({// ...你的配置plugins:[createPersistedState({key:my-vuex-app,// 存储的key名paths:[auth.token,cart.items],// 只持久化部分状态storage:window.localStorage// 默认就是localStorage})]})对于Piniapinia-plugin-persistedstateimport{createPinia}frompiniaimportpiniaPluginPersistedstatefrompinia-plugin-persistedstateconstpiniacreatePinia()pinia.use(piniaPluginPersistedstate)// 在store中使用exportconstuseUserStoredefineStore(user,{state:()({name:,preferences:{}}),persist:true// 只需这一行✨})方案3精细化控制// 更精细的持久化配置persist:{key:user-storage,// 自定义keystorage:sessionStorage,// 改用sessionStoragepaths:[name],// 只持久化name字段serializer:{// 自定义序列化serialize:JSON.stringify,deserialize:JSON.parse}}恢复数据流页面加载/刷新Store初始化持久化插件检查从localStorage读取反序列化数据恢复状态到Store组件获得持久化状态持久化数据流是组件操作Store状态更新是否配置了持久化?持久化插件捕获变更序列化数据存入 localStorage 实战小贴士1.安全第一// 不要存储敏感信息persist:{paths:[user.name,user.avatar],// ✅ 可以存// 千万不要存密码、token等敏感数据❌}2.性能优化// 对于大数据量考虑使用IndexedDBimport{useStorage}fromvueuse/core// 或者使用防抖保存persist:{storage:{getItem:(key){/* ... */},setItem:(key,value){// 添加防抖逻辑clearTimeout(this.debounceTimer)this.debounceTimersetTimeout((){localStorage.setItem(key,value)},500)}}}3.多标签页同步// 监听storage事件实现多标签页同步window.addEventListener(storage,(event){if(event.keypinia-store-key){location.reload()// 或者更精细的更新逻辑}}) 总结对比特性Vuex vuex-persistedstatePinia pinia-plugin-persistedstate配置难度中等简单代码量较多很少灵活性高很高Vue 3 支持需要兼容版本原生支持TypeScript需要额外配置完美支持 我的建议对于新项目强烈推荐 Pinia pinia-plugin-persistedstate组合原因更简单的API- 一个persist: true搞定更好的TypeScript支持更小的包体积Vue官方推荐 彩蛋一个完整的购物车示例// stores/cart.jsexportconstuseCartStoredefineStore(cart,{state:()({items:[],lastUpdated:null}),actions:{addItem(product){this.items.push({...product,addedAt:newDate()})},clearCart(){this.items[]}},// 持久化配置persist:{paths:[items],// 只持久化购物车商品storage:localStorage,afterRestore:(ctx){// 恢复后可以做一些处理比如过滤过期商品console.log(购物车数据已恢复,ctx.store.items.length)}}}) 最后的话状态持久化就像是给Vue应用加上了“记忆功能”让用户体验更加流畅自然。现在你已经掌握了Vuex和Pinia的持久化秘籍快去给你的Vue应用加上这个超能力吧记住好的状态管理让用户无感差的状态管理让用户崩溃。选择合适的工具合理设计持久化策略你的应用就会更加稳健可靠有任何问题或想法欢迎在评论区交流讨论 Happy coding! 小作业在你的项目中尝试实现一个持久化的用户偏好设置store可以记住用户的主题选择、语言设置等。完成后回来分享你的实现方案吧