Vue2&Vue3:使用Pinia来替代Vuex进行应用的状态管理

介绍

Pinia是一个同时支持Vue2和Vue3的应用状态管理工具,简单来说就是为了管理整个应用中的响应式数据,解决各个组件交互时数据状态的不好管理的问题,官方提供了Vuex来解决这些问题,但是我相信Pinia可能是一个更好的选择!


Vue2&Vue3——使用Pinia来替代Vuex进行应用的状态管理

Github和文档

https://github.com/posva/pinia

https://pinia.esm.dev/

特性

  • 直观

Stores就和组件一样,它的API设计帮助你写出有组织的Stores

  • 类型安全

类型是推断出来的,这意味着Store为你提供了自动完成的功能,甚至在JavaScript中也是如此

  • Devtools支持

Pinia与Vue Devtools,让你在Vue 2和Vue 3中都有更强的开发体验

  • 可扩展的

响应存储变化,用事务、本地存储同步等来扩展Pinia

  • 模块化设计

构建多个store,打包管理会自动拆分

  • 极其的轻量化

Pinia大小大约为1k

对比Vuex

  • 没有mutations:以前总感觉Vuex中的mutations是多余的,在Pinia中天然就没有
  • 不需要创建自定义的复杂包装器来支持TypeScript:所有东西都是类型化的,API的设计方式是尽可能地利用TS类型推理。
  • 调用方便:导入函数、调用它,自然而然地自动完成
  • 无需动态添加stores,默认都是动态的
  • 不再有模块的嵌套结构:仍然可以通过导入和使用另一个存储空间来隐含的嵌套存储空间,但Pinia在设计上提供了一个扁平的结构,仍然能够在存储空间之间进行交叉组合
  • 没有命名空间的模块,或者说所有的store都是命名空间

示例

使用你喜欢的包管理工具来安装它

yarn add pinia@next
# 或者用npm也可以,即
npm install pinia@next

修改main.js或者main.ts(这是在Vue3中)

import { createPinia } from 'pinia'
app.use(createPinia())

如果在Vue2中,则应该这样:

import { createPinia, PiniaPlugin } from 'pinia'

Vue.use(PiniaPlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  pinia,
})

来自官方的一个简单示例:

import { defineStore } from 'pinia'

export const useMainStore = defineStore({
  // store
  // 它用于 devtools 并允许恢复状态
  id: 'main',
  // 一个返回新状态的函数
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // getters
  getters: {
    doubleCount() {
      return this.counter * 2
    },
    //在getters中使用 其它getters 
    doubleCountPlusOne() {
      return this.doubleCount * 2 + 1
    },
  },
  // actions
  actions: {
    reset() {
      // `this` 使 store 实例
      this.counter = 0
    },
  },
})

使用store

import { useMainStore } from '@/stores/main'
export default defineComponent({
  setup() {
    const main = useMainStore()
    return {
      // 整个状态
      main,
      //特定的状态
      state: computed(() => main.counter),
      // 访问getter
      doubleCount: computed(() => main.doubleCount),
    }
  },
})

较完整的示例:

用户storeVue2&Vue3——使用Pinia来替代Vuex进行应用的状态管理

用户store

购物车store,调用了用户的store

Vue2&Vue3——使用Pinia来替代Vuex进行应用的状态管理

使用它们

Vue2&Vue3——使用Pinia来替代Vuex进行应用的状态管理

总结

Pinia的优点显而易见,就是更加的简单轻量,而且良好的类型推断,更能提高我们的编码效率以及出错的概率,对比Vuex,笔者认为Pinia可能会是一个更加优秀的替代品!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/23847.html

发表评论

登录后才能评论