Pinia 封装使用: 解锁 Vuex 的替代者

2023-03-10 09:17:18

Pinia：Vue.js 的下一代状态管理

什么是 Pinia？

Pinia 是一款专为 Vue.js 应用程序设计的轻量级状态管理库。它提供了一个简洁、一致的 API，简化了应用程序状态的管理和操作。与 Vuex 相比，Pinia 更轻量、更灵活、更具可扩展性，并提供了强大的功能，例如响应式状态、模块化、TypeScript 支持和无副作用的更新。

为什么选择 Pinia？

轻量级： Pinia 的代码库只有几千行代码，不会对您的应用程序性能造成影响。
灵活： Pinia 的 API 高度灵活，您可以根据应用程序需求进行配置和扩展。
可扩展： Pinia 支持轻松地将状态管理扩展到多个模块，从而增强了应用程序的可管理性和可维护性。
TypeScript 支持： Pinia 完全支持 TypeScript，提供强大的类型检查和代码智能感知功能。
无副作用的更新： Pinia 采用无副作用的更新机制，确保状态始终保持一致性。

如何使用 Pinia？

1. 安装 Pinia

npm install pinia

2. 创建 Pinia 实例

import { createPinia } from 'pinia'

const pinia = createPinia()

3. 创建状态仓库

stores/index.js

export { useCounterStore } from './counter'

stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

4. 使用状态仓库

import { useStore } from 'pinia'

export default {
  setup() {
    const counterStore = useStore('counter')

    return {
      count: counterStore.count,
      increment: counterStore.increment,
      decrement: counterStore.decrement
    }
  }
}