还不了解 Pinia 状态管理库⁉️什么是Pinia❓状态管理工具⁉️学习过Vue2的小伙伴一定都知道Vuex什么不知道请看VCR Vuex 是一个专为 Vue.js 应用程序设计的状态管理库它提供了一种集中式管理应用中的状态集中式存储它将应用的所有组件状态(数据)集中到一个单一的存储对象中使得统一管理状态管理模式它让组件的状态(数据)管理变得集中、有序便于在整个应用中共享和维护数据而在Vue3 为了遵循组合式API的理念Pinia官网腾空出世☁️当然其实它也支持Vue2使迁移新项目选择更灵活有人又说了经典白学其实完全不用但心❤️Pinia 支持Vue2、Vue3内部语法也可以是和Vuex几乎一模一样组合式 API它与Vue的组合式API无缝对接使得状态管理更加直观和高效无需Mutation不同于Vuex要求通过mutations改变状态Pinia允许直接在actions中操作state并支持异步强大的插件系统允许通过插件扩展功能增强Pinia的灵活性和功能性内置多种配置数据持久化、state管理TypeScript 支持提供了更好的TypeScript支持包括自动补全和类型推导便于开发和维护vue-pinia Demo搭建Vue3—手动添加PiniaVue3、Vite支持自动配置不过学习阶段还是尝试一下手动安装veu create latest成功创建vue-pinia项目删除无用代码配置、定义Demo模板需求App主页面、内引用子组件共同获取操作pinia数据按钮调用修改pinia数据Pinia 安装\使用Pinia 安装官方文档其实都介绍的很详细了首先下载依赖、main.js配置导入Pinia全局注入yarnaddpinia# 或者使用 npmnpminstallpinia如果你的应用使用的 Vue 版本低于 2.7你还需要安装组合式 API 包vue/composition-api创建一个pinia实例根store并将其传递给应用main.JS// import ./assets/main.cssimport{createApp}fromvueimport{createPinia}frompiniaimportAppfrom./App.vueconstappcreateApp(App)//创建Vue实例constpiniacreatePinia();//创建Pinia实例对象app.use(pinia)//Vue实例挂载 piniaapp.mount(#app)//app支持链式操: app.use(pinia).mount(#app);Pinia 核心概念\使用和Vuex 一样要使用Pinia首先要定义store库每个store可以看作是一个独立的数据管理模块负责特定部分的数据处理和状态维护Pinia支持两种方式首先Store是用defineStore(?,?);定义的有两个必须参数defineStore(仓库的唯一标识, ?\?)第一个参数要求是一个独一无二的名字第二个参数可接受两类值Setup函数或 Option对象分别对应组合式API、选项式写法;//引入 pinia 依赖import{defineStore}frompiniaimport{computed,ref}fromvue//方式一: 以 Option对象,形式定义Pinia store库,貌似现在用的比较多,因为结构相对清晰,语法与Vux几乎类似;//我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象exportconststore变量defineStore(唯一id,{state:()({//定义管理的 属性:值,}),getters:{/* 定义操作state的计算函数 */},actions:{/* 定义对外修改state的操作函数,支持异步 */},})//方式二: 以 Setup 函数,形式定义Pinia store库exportconststore变量defineStore(唯一id,(){//我们可以定义了一些响应式属性和方法: 属性对应state、函数则对应actionsconstgetterscomputed((){/* 定义操作state的计算函数 */})return{/* 保留外界需要使用的属性\函数 */}})定义 Store为了方便管理在Demo中创建store/counter.js定义Store状态管理仓库import{defineStore}frompiniaimport{computed,ref}fromvue// 定义store// defineStore(仓库的唯一标识, () { ... })// 仓库唯一标识,也被称作id是必须传入的,Pinia将用它来获取store// defineStore() 的第二个参数可接受两类值Setup 函数或 Option对象,分别对应Vue3\Vue2写法;//以 Option对象,形式定义Pinia store库,貌似现在用的比较多,因为结构相对清晰,语法与Vux几乎类似;exportconstuseCounterStoredefineStore(vue2ID,{//参数,以对象形式进行传递,内部几乎就是Vuex写法,没有了 mutations 全由actions 定义函数,支持异步)state:()({count:0}),actions:{addCount(){this.count},},getters:{doubleCount:(state)state.count*2,},})//以 Setup 函数,形式定义Pinia store库// export const useCounterStore defineStore(vue3ID, () {// // 声明数据 count// const count ref(100)// // 声明操作数据的方法 addCount// const addCount () count.value// // 声明数据派生计算属性 double 获取双倍count// const doubleCount computed(() count.value * 2) //最后,将需要保留的函数\属性抛出;// return {// count,// addCount,// doubleCount,// }// })模板引入操作PiniaApp.vue主页面引入Store状态管理仓库scriptsetupimportSon1Comfrom/components/Son1Com.vue//导入组件依赖;import{useCounterStore}from/store/counter//导入对应的store依赖,并暴漏获取对应的state对象,模板则直接访问;constcounterStoreuseCounterStore()/scripttemplatedivh3App.vue根组件,获取Pinia数据{{ counterStore.count }}/h3Son1Com/Son1Com/div/templatestylescoped/styleSon1Com.vue子组件引入可以通过Store对象.属性\函数\getterss属性直接获取对应值scriptsetupimport{useCounterStore}from/store/counterconstcounterStoreuseCounterStore();/scripttemplatedivclasssonbuttonclickcounterStore.addCountPinia数据/buttonbr/我是Son1.vue 获取Pinia数据{{ counterStore.count }}br/Pinia getters管理双倍数据 {{ counterStore.doubleCount }}/div/templatestylescoped.son{border:1px solid #000;padding:30px;}/stylePinia action 异步写法在 Pinia 中函数处理主要通过 actions 来实现actions支持同步和异步操作这对于执行API调用、延迟操作或任何需要等待的操作非常有用需求使用Pinia 管理一个接口异步数据给所有模块使用管理接口GET: http://geek.itheima.net/v1_0/channelsstoreToRefs 函数Pinia进行状态管理时storeToRefs是一个非常重要的函数它用于将Piniastore中的状态属性转换为响应式引用为什么需要storeToRefs直接解构store中的状态可能会导致失去响应性因为解构出来的变量不再是Vue的响应式数据scriptsetupimportSon1Comfrom/components/Son1Com.vue//导入组件依赖;import{useCounterStore}from/store/counter//导入对应的store依赖,并暴漏获取对应的state对象,模板则直接访问;constcounterStoreuseCounterStore()//实际开发中我们每次都要store对象.属性\函数太麻烦,能不能解构赋值直接获取内部属性呢//counterStore 不能直接解构,直接解构 store对象 获取属性\函数会丢失响应式;//const { count,getList,channelList } counterStore;//需要通过storeToRefs(store对象)//将 store对象 状态转换为响应式引用,然后通过解构赋值给局部变量;const{getList}counterStore;import{storeToRefs}frompinia;const{count,channelList}storeToRefs(counterStore);/scripttemplatedivh3App.vue根组件,获取Pinia数据{{ count }}/h3Son1Com/Son1CombuttonclickgetList获取频道数据/buttonulliv-foritem in channelList:keyitem.id{{ item.name }}/li/ul/div/templatestylescoped/stylePinia 持久化Pinia 提供了数据持久化的能力这对于需要在页面刷新后保持状态的应用来说至关重要为什么需要数据持久化保持用户状态例如用户登录信息、购物车内容等刷新页面后不应丢失。提升用户体验用户不需要每次刷新页面都重新设置或登录使用 pinia-plugin-persistedstate 插件支持通过包管理器安装pinia-plugin-persistedstate或使用yarn add pinia-plugin-persistedstate、npm i pinia-plugin-persistedstate配置 Pinia需要在你的 Pinia 配置文件中引入并使用该插件即main.JS// import ./assets/main.cssimport{createApp}fromvueimport{createPinia}frompiniaimportAppfrom./App.vue// 导入持久化的插件importpersistfrompinia-plugin-persistedstateconstappcreateApp(App)//创建Vue实例constpiniacreatePinia();//创建Pinia实例对象app.use(pinia.use(persist))//Vue实例挂载 piniaapp.mount(#app)//app支持链式操: app.use(pinia).mount(#app);启用持久化在每个需要持久化的store中通过persist: true来开启默认配置使用localStorage存储整个 state//defineStore 函数第三个配置参数;//默认配置使用localStorage存储整个state, vue3ID作为KeyexportconstuseCounterStoredefineStore(vue3ID,(){/* ...省略... */},{persist:true});持久化配置扩展上述完成了Pinia数据持久化持久化至Local storagekey是store库唯一ID插件支持很多配置比如自定义Key、设置持久化特有属性exportconstuseCounterStoredefineStore(vue3ID,(){/* ...省略... */},{persist:{key:divID,// 修改本地存储的唯一标识paths:[count]// 存储的是哪些数据}});代码管理本代码已经使用Git进行管理
