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

Vedu • 2021-06-29 18:43 • 资源分享 • 阅读 4442

介绍

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

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),
    }
  },
})

较完整的示例：

用户store

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

使用它们

总结

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

内容出处：，

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

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

介绍

Github和文档

特性

对比Vuex

示例

总结

相关推荐

发表评论