男直接做的视频网站外包加工网注册收费

男直接做的视频网站,外包加工网注册收费,网站首页图片切换代码,城市分类信息网站建设Pinia 是 Vue3 官方推荐的状态管理库#xff08;替代 Vuex#xff09;#xff0c;相比 Vuex 更简洁、轻量化#xff0c;原生支持组合式 API#xff0c;无嵌套模块限制#xff0c;且完美兼容 Vue DevTools。下面时pinia官方的介绍#xff1a;下面介绍一下 Pinia这款状态管…Pinia 是 Vue3 官方推荐的状态管理库替代 Vuex相比 Vuex 更简洁、轻量化原生支持组合式 API无嵌套模块限制且完美兼容 Vue DevTools。下面时pinia官方的介绍下面介绍一下 Pinia这款状态管理工具的完整用法实际项目在的大多数场景可以直接照着代码改一下就可以用了。一、核心优势为什么选 Pinia无需嵌套模块天然支持「扁平化模块化」抛弃mutation仅需state/getters/actions简化状态修改逻辑原生支持 TypeScript类型提示更友好支持组合式 APIsetup和选项式 API 两种写法体积更小约 1KB性能更优完美兼容 Vue DevTools支持时间旅行、状态追踪。二、基础安装# npmnpminstallpinia# yarnyarnaddpinia# pnpmpnpmaddpinia三、全局挂载 Pinia 实例在main.js中创建并挂载 Pinia 实例所有组件可共享 Store// src/main.js (Vue3 Vite)import{createApp}fromvue;import{createPinia}frompinia;// 导入 PiniaimportAppfrom./App.vue;constappcreateApp(App);constpiniacreatePinia();// 创建 Pinia 实例app.use(pinia);// 挂载到 Vue 应用app.mount(#app);四、定义 Store核心Pinia 中「Store」是状态管理的核心单元每个业务模块如用户、购物车对应一个独立的 Store。支持两种写法选项式 API类似 Vuex和组合式 API更灵活。1. 选项式 API 写法推荐新手// src/stores/counterStore.jsimport{defineStore}frompinia;// 第一个参数Store 唯一标识必须唯一第二个参数配置对象exportconstuseCounterStoredefineStore(counter,{// 1. 状态返回初始值的函数类似 Vue 的 datastate:()({count:0,title:Pinia 计数器,userInfo:{name:张三,age:20}}),// 2. 计算属性类似 Vue 的 computed缓存结果getters:{// 基础用法基于 state 计算doubleCount:(state)state.count*2,// 依赖其他 getter通过 this 访问doubleCountPlusOne(){returnthis.doubleCount1;},// 带参数的 getter返回函数getCountByMultiplier:(state)(multiplier){returnstate.count*multiplier;}},// 3. 方法支持同步/异步修改状态类似 Vue 的 methodsactions:{// 同步修改increment(){this.count;// 直接修改 state无需 mutation},// 带参数的同步方法incrementBy(num){this.countnum;},// 异步方法如接口请求asyncfetchData(){constresawaitfetch(https://api.example.com/count);constdataawaitres.json();this.countdata.count;// 异步修改状态},// 调用其他 actionasyncfetchAndIncrement(){awaitthis.fetchData();// 调用自身异步 actionthis.increment();// 调用同步 action}}});2. 组合式 API 写法推荐 Vue3 组合式项目更灵活可复用组合式函数composables// src/stores/counterStore.jsimport{defineStore}frompinia;import{ref,computed}fromvue;// 组合式 API 写法返回函数exportconstuseCounterStoredefineStore(counter,(){// 1. 状态等价于 state用 ref/reactive 定义constcountref(0);consttitleref(Pinia 计数器);constuserInforef({name:张三,age:20});// 2. 计算属性等价于 getters用 computed 定义constdoubleCountcomputed(()count.value*2);constdoubleCountPlusOnecomputed(()doubleCount.value1);constgetCountByMultiplier(multiplier)count.value*multiplier;// 3. 方法等价于 actions普通函数constincrement(){count.value;};constincrementBy(num){count.valuenum;};constfetchDataasync(){constresawaitfetch(https://api.example.com/count);constdataawaitres.json();count.valuedata.count;};// 必须返回需要暴露的状态/方法return{count,title,userInfo,doubleCount,doubleCountPlusOne,getCountByMultiplier,increment,incrementBy,fetchData};});五、组件中使用 Store1. 基础使用组合式 API 组件!-- src/components/Counter.vue -- template div h3{{ counterStore.title }}/h3 p当前计数{{ counterStore.count }}/p p双倍计数{{ counterStore.doubleCount }}/p p三倍计数{{ counterStore.getCountByMultiplier(3) }}/p button clickcounterStore.increment1/button button clickcounterStore.incrementBy(5)5/button button clickcounterStore.fetchData异步获取计数/button button clickresetCount重置计数/button /div /template script setup // 1. 导入 Store 函数 import { useCounterStore } from /stores/counterStore; // 2. 创建 Store 实例Pinia 会自动复用单例多次调用也返回同一个实例 const counterStore useCounterStore(); // 3. 直接修改状态Pinia 默认允许可通过严格模式禁止 const resetCount () { counterStore.count 0; }; /script2. 解构 Store 保持响应式关键直接解构 Store 会丢失响应式需用storeToRefs辅助script setup import { useCounterStore } from /stores/counterStore; import { storeToRefs } from pinia; // 导入辅助函数 const counterStore useCounterStore(); // 错误解构后丢失响应式 // const { count, doubleCount } counterStore; // 正确用 storeToRefs 解构保留响应式 const { count, doubleCount, title } storeToRefs(counterStore); // actions 方法无需解构本身是函数不涉及响应式 const { increment, fetchData } counterStore; /script template div p{{ title }}/p p{{ count }}/p p{{ doubleCount }}/p button clickincrement1/button button clickfetchData异步获取/button /div /template3. 选项式 API 组件中使用script import { useCounterStore } from /stores/counterStore; import { mapState, mapActions } from pinia; // 导入映射辅助函数 export default { computed: { // 映射 state/getters 到计算属性 ...mapState(useCounterStore, [count, doubleCount, title]) }, methods: { // 映射 actions 到方法 ...mapActions(useCounterStore, [increment, fetchData]) }, mounted() { console.log(this.count); // 访问状态 this.increment(); // 调用方法 } }; /script六、模块化多 Store 管理Pinia 天然支持模块化每个业务模块对应一个独立的 Store无需嵌套src/stores/ ├── counterStore.js // 计数器 Store ├── userStore.js // 用户 Store ├── cartStore.js // 购物车 Store示例用户 Store// src/stores/userStore.jsimport{defineStore}frompinia;exportconstuseUserStoredefineStore(user,{state:()({token:,userInfo:null,permissions:[]}),actions:{// 登录asynclogin(username,password){constresawaitfetch(/api/login,{method:POST,body:JSON.stringify({username,password})});constdataawaitres.json();this.tokendata.token;this.userInfodata.userInfo;this.permissionsdata.permissions;},// 退出登录logout(){this.token;this.userInfonull;this.permissions[];}}});组件中按需导入多 Storescript setup import { useCounterStore } from /stores/counterStore; import { useUserStore } from /stores/userStore; const counterStore useCounterStore(); const userStore useUserStore(); // 调用不同 Store 的方法 const handleLogin async () { await userStore.login(admin, 123456); counterStore.increment(); }; /script七、进阶用法1. 状态持久化本地存储安装插件pinia-plugin-persistedstate可以实现 Store 状态自动持久化到localStorage/sessionStoragenpminstallpinia-plugin-persistedstate// src/main.jsimport{createApp}fromvue;import{createPinia}frompinia;importpiniaPluginPersistedstatefrompinia-plugin-persistedstate;// 导入插件importAppfrom./App.vue;constpiniacreatePinia();pinia.use(piniaPluginPersistedstate);// 注册插件constappcreateApp(App);app.use(pinia);app.mount(#app);在 Store 中开启持久化// 选项式 API 写法exportconstuseUserStoredefineStore(user,{state:()({token:,userInfo:null}),actions:{/* ... */},persist:true,// 开启持久化默认存储到 localStorage});// 自定义持久化配置exportconstuseCartStoredefineStore(cart,{state:()({items:[]}),persist:{key:cart-store,// 自定义存储键名storage:sessionStorage,// 存储到 sessionStoragepaths:[items],// 仅持久化 items 字段默认全量},});2. Store 间通信一个 Store 可直接调用另一个 Store 的状态/方法// src/stores/cartStore.jsimport{defineStore}frompinia;import{useUserStore}from./userStore;// 导入其他 StoreexportconstuseCartStoredefineStore(cart,{state:()({items:[]}),actions:{asyncaddItem(item){constuserStoreuseUserStore();// 创建其他 Store 实例if(!userStore.token){thrownewError(未登录无法添加商品);}// 调用接口添加商品awaitfetch(/api/cart/add,{method:POST,headers:{Authorization:userStore.token},body:JSON.stringify(item)});this.items.push(item);}}});3. 严格模式禁止直接修改状态Pinia 默认允许直接修改state开启严格模式后仅允许通过actions修改状态类似 Vuex 的严格模式// src/main.jsimport{createPinia}frompinia;constpiniacreatePinia();// 开启严格模式仅生产环境建议关闭if(import.meta.env.MODE!production){pinia.use(({store}){store.$subscribe((mutation,state){// 检测是否直接修改 state非 actions 触发if(mutation.typedirect){console.warn([Pinia 严格模式] 禁止直接修改${store.$id}的状态${mutation.payload});}});});}4. 状态重置调用$reset()方法重置 Store 到初始状态script setup import { useCounterStore } from /stores/counterStore; const counterStore useCounterStore(); const resetStore () { counterStore.$reset(); // 重置所有状态到初始值 }; /script5. 批量修改状态使用$patch批量修改状态性能更优DevTools 会记录为一次修改// 方式1对象形式counterStore.$patch({count:10,title:新标题});// 方式2函数形式支持复杂逻辑counterStore.$patch((state){state.count5;state.userInfo.age1;});八、调试技巧Vue DevToolsPinia 完美兼容 DevTools可在「Pinia」面板查看所有 Store 的状态支持「时间旅行」回溯状态修改记录$subscribe 监听状态变化constcounterStoreuseCounterStore();// 监听状态变化counterStore.$subscribe((mutation,state){console.log(状态变化,mutation.type,mutation.payload,state);});$onAction 监听 action 调用counterStore.$onAction(({name,args,after,onError}){console.log(开始执行 action${name}参数${args});after((result){console.log(action${name}执行成功结果${result});});onError((error){console.error(action${name}执行失败${error});});});九、常见问题解构 Store 丢失响应式用storeToRefs解构状态方法可直接解构Store 实例重复创建无需担心Pinia 会自动复用单例多次调用useCounterStore()始终返回同一个实例TypeScript 类型提示选项式 API 自动推导类型组合式 API 需手动标注或用defineStore自动推导SSR 适配Pinia 原生支持 SSR需在服务端为每个请求创建独立的 Pinia 实例避免状态污染。总结Pinia 的核心用法可总结为安装并挂载 Pinia 实例用defineStore定义 Store选项式/组合式组件中导入并创建 Store 实例通过storeToRefs解构响应式状态用actions处理同步/异步状态修改getters处理计算属性多 Store 实现模块化插件扩展持久化、调试等能力。相比 Vuex的繁琐Pinia 更简洁、灵活是 Vue3 项目状态管理的首选建议在中大型项目中使用小型项目可根据项目实际情况选择更加合适的。