初探 Pinia：掌握 Vue 3 状态管理工具

2024-02-04 02:30:43

Pinia：Vue 3 的状态管理利器

在 Vue 生态圈中，状态管理一直是一个重要的课题。Pinia 的出现，为 Vue 3 提供了一个轻量级且易于使用的状态管理解决方案，备受开发者的青睐。它秉承着 Vuex 的设计理念，却更加轻巧、灵活，让我们能够轻松管理应用程序的状态，从而构建出更加复杂和可扩展的应用。

安装 Pinia

在使用 Pinia 之前，我们需要先进行安装。可以通过以下方式进行：

# 使用 npm
npm install pinia

# 使用 yarn
yarn add pinia

安装完成后，在你的 Vue 3 项目中引入 Pinia：

import { createPinia } from 'pinia'
const pinia = createPinia()

然后，在你的应用程序中使用 Pinia：

import { useStore } from 'pinia'
const store = useStore()

基本使用

1. 创建 Store

首先，我们需要创建一个 Store 来管理状态。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      count: 0
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

2. 使用 Store

在创建了 Store 之后，我们就可以在组件中使用它了。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useStore } from 'pinia'

export default {
  setup() {
    const store = useStore()

    return {
      count: store.state.count,
      increment: store.actions.increment,
      decrement: store.actions.decrement
    }
  }
}
</script>