昆明网站建设时间,云南建设投资集团网站,黄页推广公司大全,地方网站欣赏#x1f3ac; 岸边的风#xff1a;个人主页 #x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想#xff0c;就是为了理想的生活 ! 目录 #x1f4da; 前言 #x1f4d8; 创建 Pinia #x1f4d8; Option Store #x1f4d8; Pinia 提供多种选项配… 岸边的风个人主页 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想就是为了理想的生活 ! 目录 前言 创建 Pinia Option Store Pinia 提供多种选项配置 Store: state getters actions persist 使用 Store 读取状态 调用 Actions 多个 Store Setup Store 数据持久化 Pinia 插件 购物车示例 Pinia 插件 实现一个持久化插件 写在最后 前言 Pinia,让状态管理再无难题! 作为Vue.js官方推荐的新星级管理库,Pinia为开发者带来前所未有的顺滑体验。你还在为复杂难懂的状态管理代码头疼吗?别急,用Pinia你可以告别一切烦恼! 本指南将为您还原Pinia的奥秘,您将掌握它独特的简洁API使用技巧,迅速成为状态管理的专家级大师!无论您是新手还是老鸟,这里的专业指导将助您在项目中如虎添翼,以最轻松的姿态管理复杂应用状态。 快来 Reshape Your State Management Skills吧!我们一起领略 Pinia的魅力! 创建 Pinia 在 main.js 中导入 createPinia 并使用: import { createApp } from vue import { createPinia } from piniaconst pinia  createPinia() const app  createApp(App)app.use(pinia)可以通过 app.config.globalProperties.$pinia 访问 Pinia 实例。 Option Store 与 Vue 的选项式 API 类似我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象废弃了Mutations 使用 defineStore API 定义 Store: import { defineStore } from piniaexport const useMainStore  defineStore(main, {// statestate: ()  {return {counter: 0}},// gettersgetters: {doubleCount(state) {return state.counter * 2}},// actionsactions: {increment() {this.counter }} })接收唯一 ID 作为第一个参数 state、getters、actions 定义方式与 Vue 组件类似 可以直接通过 this 访问状态 Pinia 提供多种选项配置 Store: state 定义响应式状态: state: ()  {return {count: 0} } 必须是一个返回状态对象的函数。 getters 定义 getter 计算属性: getters: {double(state) {return state.count * 2} }getter 可以接收参数: getters: {getMessage(state) {return (name  Vue)  Hello ${name} } }actions 定义方法修改状态: actions: {increment(amount  1) {this.count  amount} }actions 支持同步和异步操作。 persist 配置数据持久化,需要使用插件: persist: {enabled: true,strategies: [{key: my_store,storage: localStorage,},] } 使用 Store 通过 useXxxStore() 获取 Store 实例: import { useMainStore } from /stores/mainexport default {setup() {const main  useMainStore()main.increment()}  }读取状态、调用 actions 同 Vue 组件。 读取状态 // 直接读取 const count  main.count// 通过计算属性 const double  computed(()  main.doubleCount)// 通过 storeToRefs const { count }  storeToRefs(main)调用 Actions main.increment()const message  main.getMessage(Vue)多个 Store 可以拆分多个 Store 管理不同模块状态: stores |- user.js |- product.js单独导出每个 Store 并在组件中使用: import { useUserStore } from /stores/user import { useProductStore } from /stores/product export default {setup() {// ...} }Store 可以互相引用: // userStore.js import { useProductStore } from ./productexport const useUserStore  defineStore({// 可以直接使用 productStore })Setup Store 个人比较倾向这种语法 也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似我们可以传入一个函数该函数定义了一些响应式属性和方法并且返回一个带有我们想暴露出去的属性和方法的对象。 export const useCounterStore  defineStore(counter, ()  {const count  ref(0)function increment() {count.value}return { count, increment } })在 Setup Store 中 ref() 就是 state 属性 computed() 就是 getters function() 就是 actions Setup store 比 Option Store 带来了更多的灵活性因为你可以在一个 store 内创建侦听器并自由地使用任何组合式函数。不过请记住使用组合式函数会让 SSR 变得更加复杂。 数据持久化 Pinia 默认状态不持久化,可以通过插件实现持久化: npm install pinia-plugin-persistedstateimport persistedState from pinia-plugin-persistedstateconst pinia  createPinia() pinia.use(persistedState) 在 Store 中配置 persist: export const useUserStore  defineStore({persist: {enabled: true}  }) 配置 storage 指定存储位置: persist: {storage: sessionStorage }Pinia 插件 Pinia 生态已有许多插件,可以扩展更多功能: pinia-plugin-persistedstate:数据持久化 pinia-plugin-debounce:防抖修改状态 pinia-plugin-pinia-observable:转换成 Observable 使用插件: import piniaPluginPersist from pinia-plugin-persistpinia.use(piniaPluginPersist)Devtools Pinia支持Vue devtools 购物车示例 我们来通过一个购物车的例子看看 Pinia 的用法: // store.js import { defineStore } from piniaexport const useCartStore  defineStore(cart, {state: ()  {return {items: []  }},getters: {total(state) {return state.items.reduce((total, item)  {return total  item.price  }, 0)}},actions: {addItem(item) {this.items.push(item)},removeItem(id) {this.items  this.items.filter(i  i.id ! id)}} })在组件中使用: // Cart.vueimport { useCartStore } from /stores/cartsetup() {const cart  useCartStore()return {items: cart.items,total: cart.total} }可以看出代码非常简洁直观。 Pinia 插件 Pinia 插件是一个函数可以选择性地返回要添加到 store 的属性。它接收一个可选参数即 context。 export function myPiniaPlugin(context) {context.pinia // 用 createPinia() 创建的 pinia。 context.app // 用 createApp() 创建的当前应用(仅 Vue 3)。context.store // 该插件想扩展的 storecontext.options // 定义传给 defineStore() 的 store 的可选对象。// ... }然后用 pinia.use() 将这个函数传给 pinia pinia.use(myPiniaPlugin)插件只会应用于「在 pinia 传递给应用后」创建的 store否则它们不会生效。 实现一个持久化插件 getStorage 函数根据提供的 key 从本地存储中读取数据。如果数据无法解析或不存在则返回 null。 setStorage 函数将提供的值转换为 JSON 格式并以指定的 key 保存到本地存储中。 DEFAULT_KEY 常量表示默认的本地存储键名前缀。如果在选项中未提供自定义键名将使用该默认键名。 Options 类型定义了插件选项对象的类型包含 key本地存储键名前缀和 needKeepIds需要进行持久化的 Pinia 存储的 ID 数组两个可选属性。 piniaPlugin 函数这是主要的插件函数它接收一个选项对象并返回一个用于处理 Pinia 存储的函数。 import { PiniaPluginContext } from pinia; import { toRaw } from vue;// Get data from local storage by key export function getStorage(key) {const data  localStorage.getItem(key);try {return JSON.parse(data);} catch (error) {return null;} }// Set data to local storage with a key export function setStorage(key, value) {const data  JSON.stringify(value);localStorage.setItem(key, data); }const DEFAULT_KEY  pinia;type Options  {key?: string;needKeepIds?: string[]; };const piniaPlugin  ({ key  DEFAULT_KEY, needKeepIds  [] }: Options)  {return (context: PiniaPluginContext)  {const { store }  context;const data  getStorage(${key}-${store.$id});const subscribeToStore  ()  {if (needKeepIds.length  0 || needKeepIds.includes(store.$id)) {setStorage(${key}-${store.$id}, toRaw(store.$state));}};store.$subscribe(subscribeToStore);return {...data,};}; };export default piniaPlugin;写在最后 Pinia是Vue.js的新一代状态管理解决方案,由Vue核心团队开发,其设计理念简洁直观,易于上手使用。相较于Vuex,Pinia解决了其过于复杂的问题,提供了更符合Vue理念的状态管理方式。 Pinia通过组合式Store结构,实现了状态、获取器、操作行为的逻辑分离。开发者可以轻松地创建Store模块,在Vue组件内直接使用$store语法访问状态,无需导入映射函数,语法非常简洁。同时Pinia还提供了完整的TypeScript支持,可以为State、Getters、Actions添加类型检测。 除此之外,Pinia还有模块热更新,无需重载页面即可看到状态变更,开发调试体验更佳。同时支持Vue DevTools进行调试,也提供插件机制等拓展功能。总的来说,Pinia是一个非常轻量、易于理解和使用的状态管理方案,可以极大地提升Vue项目的开发效率。它是Vue生态中简洁高效管理状态的首选解决方案。