轻量状态管理工具Pinia

石力派

轻量状态管理工具 Pinia 381 前言作为前端开发，你肯定知道状态管理是日常开发很重要的一部分。你肯定也听过许多状态管理工具，今天我们说一下 Vue 系列的新起之秀 Pinia。什么是 PiniaPinia 和 Vuex 一样是专门为 Vue 设计的状态管理库，它允许你跨组件或页面共享状态，Api 设计比 Vuex 更简单易学，且同时支持 Vue2.0 和 Vue3.0。安装yarn add pinia// 或者使用 npmnpm install pinia创建一个 Pinia 实例 (根 Store ) 并将其传递给应用：import { createApp } from 'vue'import { createPinia } from 'pinia'import App from './App.vue'const pinia = createPinia()const app = createApp(App)app.use(pinia)app.mount('#app')如何创建 Store在创建 Store 之前我们先简单描述一下什么是 StoreStore (如 Pinia) 是一个保存状态和业务逻辑的实体，它承载着全局状态，每个组件都可以读取和写入它。它有三个概念：State、Getter 和 Action，可以想象成组件中的 Data、 Computed 和 Methods。创建一个 Store，在 src/stores 创建一个 counter.ts// stores/counter.ts// options 模式import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {  state: () => {    return { count: 0 }  },  actions: {    increment() {      this.count++    },  },})// Setup 模式import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {  const count = ref(0)    function increment() {    count.value++  }  return { count, increment }})上述代码就是创建一个 Store，DefineStore 可以随意命名，但最好保持 Use 这种风格，DefineStore 第一个参数是唯一的，不可重复，因为是应用中 Store 的唯一 ID，Pinia 将用 ID 连接 Store 和 Devtools。DefineStore 的第二个参数可以接受 Setup 函数或 Option 对象。StateState 的使用import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()     {{counter.count}}  修改 State// 直接修改counter.count++// 或者使用 $patch 修改 （可以修改多个属性）counter.$patch({  count: counter.count + 1,})重置 State// 通过调用 store 的 $reset() 方法将 state 重置为初始值。counter.$reset()解构:import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()const {count} = counter     {{counter.count}}   {{count}}  State 也可以使用解构，但是解构会失去响应式，需要 StoreToRefs 避免丢失响应式import { storeToRefs } from 'pinia'const counter = useCounterStore()const {count} = storeToRefs(counter)GetterGetter 完全等同于 Store 的 State 的计算属性。写法也类似，可以使用 this 访问整个 Store 的实例，甚至可以访问其他 Store 的 Getter，而且可以和 Vue 一样返回一个函数 接受参数（但是这样 Getter 将不再被缓存，只是个被调用的函数），使用同 State 访问模式一样。import { useOtherStore } from './other-store'export const useCounterStore = defineStore('counter', {  state: () => {    return { count: 0 }  },  getters: {    // 使用 state 可以自动推到出类型    doubleCount(state) {      return state.count * 2    },    // 返回类型必须明确设置    doublePlusOne(): number {      return this.doubleCount + 1    },   //还可以访问其他 getter   otherGetter(state) {      const otherStore = useOtherStore()      return state.count + otherStore.count    },  },  actions: {    increment() {      this.count++    },  },})ActionAction 相当于组件中的 Methods，类似 Getter，Action 也可通过 this 访问整个 Store 的实例 Action 也可以是异步的，还可以访问其他Store 的 Action。import { useAuthStore } from './user'export const useCounterStore = defineStore('counter', {  state: () => {    return {       userInfo: {}    }  },  actions: {   async fetchUserInfo() {      const auth = useAuthStore()      if (auth.isAuthenticated) {        this.userInfo = await fetchUserInfo()      }    },  },})调用    点击我总结以上就是 Pinia 的基本使用。回顾以前使用的 Vuex 是不是 Api 是不是非常简洁，Pinia 抛弃了 Mutation 和 Module，只保留State、Getter 和 Action，而且使用方法和组件中 Data、 Computed 和 Methods 类似，上手零成本。而且支持 ts，极致轻量化代码只有1kb左右。参考链接https://pinia.web3doc.top/，Base 杭州，一个富有激情和技术匠心精神的成长型团队。前端团队，一个年轻富有激情和创造力的前端团队。团队现有 80 余个前端小伙伴，平均年龄 27 岁，近 4 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、智能化平台、性能体验、云端应用、数据分析、错误监控及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com