拓冰网站定制 
作者标识沉冰浮水 / GesF-Force / GesF Lib正式接触 Vue.js 也两年多了实际写过的项目好像也就 4 个「基于 Vite」另外还试过 mpvue 和 taro 写小程序 —— 同样的功能需求用两个框架加 Vue 分别实现了一遍最早写作为 Z-BlogPHP 主题的 vite_zbp_vue_TestType 项目时使用了 Vuex 管理状态后来官方推荐换 Pinia然而一直懒得更新实际上两者具体使用上的区别也还没了解清楚再然后以这个项目来说可能不用专门的状态管理大概也可以用响应式 API 做简单状态管理 | Vue.jshttps://cn.vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api然后目前的第四个项目是一个集成 DPlayer 的在线视频播放器作品 分集切换的实现就需要用到状态管理算是一个很恰当的实践下边是实现思路的讲解 ——· 封装一个 store 对象用于全局状态管理· 对于状态属性的读写以及和 localStorage 的交互封装为相应方法// store.ts// 引入响应式 API 和 localStorage 的封装import{reactive}fromvueimport{useStorage}fromvueuse/core// 省略了一些类型定义和具体方法的实现constlsStoreuseStorage(lsStore,{lst_work:0}asTypeLsStore)exportconststorereactive({// 当前剧集信息work_id:0,work_name:,work_ep:1,work_ep_time:0,work_ep_max:0,// 剧集列表work_list:[]asTypeData[items],// 初始化init:(list:TypeData[items]){// 写入剧集列表store.work_listlist// 切换到上次播放的作品store.changeWork(lsStore.value.lst_work)},// 作品切换changeWork:(id:number){},// 剧集切换changeEp:(ep:number){},// 判断并读取上次播放记录第几集的第几秒getProg:(){},// 写入播放记录setProg:(){lsStore.value[store.work_id]{lst_ep:store.work_ep,lst_ep_time:store.work_ep_time,}},})· 只有一个 App.vue 页面所以不需要路由scriptsetuplangts// 引入 API 和状态管理对象import{computed}fromvueimport{store}from./base/store// 其他组件、数据处理等// ...// 初始化状态store.init(data.items)// 分页切换后将新的“页码”更新到 storefunctionpageChange(type:string,page:number){if(typeep){store.changeEp(page)}elseif(typeworks){store.changeWork(page-1)}}// ↑ 分页组件内绑定点击事件向上传递给父组件内监听函数更新 store 状态后把切换效果渲染回分页组件// ↑ 这里可以在分页组件内直接更新 store 状态切换函数放在分页组件自身具体取舍看实际需要// dplayer 组件内有自动续播及时间进度记录之类的所以就选择了直接更新 store 状态// 作品分页信息constworksPageInfocomputed((){return{name:作品列表,type:works,page:store.work_id1,items:store.work_list,}})// 分集翻页信息constepPageInfocomputed((){return{name:分集列表,page:store.work_ep,type:ep,total:store.work_list[store.work_id].maxP,}})// 当「状态」变化时会重新获取视频数据以及上边的分页信息constdplayerInfocomputed((){returnbuildDplayerInfo(dataasTypeData,store.work_id,store.work_ep)})/script!-- ↓↓ computed 封装的数据更新时会触发相应的组件重新渲染 ↓↓ --template!-- 视频播放器调用 --dplayer:dplayerInfodplayerInfo/dplayer!-- 分集翻页 --pagebar:pageInfoepPageInfopage-changepageChange/pagebar!-- 作品列表分页 --pagebar:pageInfoworksPageInfopage-changepageChange/pagebar/template「- -」「- -」「- -」「- -」「- -」「- -」「- -」「- -」 「折腾」Vue 简单的状态管理实践
作者标识沉冰浮水 / GesF-Force / GesF Lib正式接触 Vue.js 也两年多了实际写过的项目好像也就 4 个「基于 Vite」另外还试过 mpvue 和 taro 写小程序 —— 同样的功能需求用两个框架加 Vue 分别实现了一遍最早写作为 Z-BlogPHP 主题的 vite_zbp_vue_TestType 项目时使用了 Vuex 管理状态后来官方推荐换 Pinia然而一直懒得更新实际上两者具体使用上的区别也还没了解清楚再然后以这个项目来说可能不用专门的状态管理大概也可以用响应式 API 做简单状态管理 | Vue.jshttps://cn.vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api然后目前的第四个项目是一个集成 DPlayer 的在线视频播放器作品 分集切换的实现就需要用到状态管理算是一个很恰当的实践下边是实现思路的讲解 ——· 封装一个 store 对象用于全局状态管理· 对于状态属性的读写以及和 localStorage 的交互封装为相应方法// store.ts// 引入响应式 API 和 localStorage 的封装import{reactive}fromvueimport{useStorage}fromvueuse/core// 省略了一些类型定义和具体方法的实现constlsStoreuseStorage(lsStore,{lst_work:0}asTypeLsStore)exportconststorereactive({// 当前剧集信息work_id:0,work_name:,work_ep:1,work_ep_time:0,work_ep_max:0,// 剧集列表work_list:[]asTypeData[items],// 初始化init:(list:TypeData[items]){// 写入剧集列表store.work_listlist// 切换到上次播放的作品store.changeWork(lsStore.value.lst_work)},// 作品切换changeWork:(id:number){},// 剧集切换changeEp:(ep:number){},// 判断并读取上次播放记录第几集的第几秒getProg:(){},// 写入播放记录setProg:(){lsStore.value[store.work_id]{lst_ep:store.work_ep,lst_ep_time:store.work_ep_time,}},})· 只有一个 App.vue 页面所以不需要路由scriptsetuplangts// 引入 API 和状态管理对象import{computed}fromvueimport{store}from./base/store// 其他组件、数据处理等// ...// 初始化状态store.init(data.items)// 分页切换后将新的“页码”更新到 storefunctionpageChange(type:string,page:number){if(typeep){store.changeEp(page)}elseif(typeworks){store.changeWork(page-1)}}// ↑ 分页组件内绑定点击事件向上传递给父组件内监听函数更新 store 状态后把切换效果渲染回分页组件// ↑ 这里可以在分页组件内直接更新 store 状态切换函数放在分页组件自身具体取舍看实际需要// dplayer 组件内有自动续播及时间进度记录之类的所以就选择了直接更新 store 状态// 作品分页信息constworksPageInfocomputed((){return{name:作品列表,type:works,page:store.work_id1,items:store.work_list,}})// 分集翻页信息constepPageInfocomputed((){return{name:分集列表,page:store.work_ep,type:ep,total:store.work_list[store.work_id].maxP,}})// 当「状态」变化时会重新获取视频数据以及上边的分页信息constdplayerInfocomputed((){returnbuildDplayerInfo(dataasTypeData,store.work_id,store.work_ep)})/script!-- ↓↓ computed 封装的数据更新时会触发相应的组件重新渲染 ↓↓ --template!-- 视频播放器调用 --dplayer:dplayerInfodplayerInfo/dplayer!-- 分集翻页 --pagebar:pageInfoepPageInfopage-changepageChange/pagebar!-- 作品列表分页 --pagebar:pageInfoworksPageInfopage-changepageChange/pagebar/template「- -」「- -」「- -」「- -」「- -」「- -」「- -」「- -」