Vue | Vue.js 全家桶 Pinia状态管理

// 安装 Pinia
import { createPinia } from 'pinia'
 
// 在 Vue 应用中使用 Pinia
const app = createApp(App)
 
// 创建 Pinia 的 store 实例
const pinia = createPinia()
 
// 将 Pinia 实例插入到 Vue 应用中
app.use(pinia)
 
// 定义一个 Pinia 的 store
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})
 
// 在组件中使用 store
<script setup>
import { useCounterStore } from './stores/counterStore'
 
const counter = useCounterStore()
</script>
 
<template>
  <button @click="counter.increment">{{ counter.count }}</button>
</template>

这个例子展示了如何在 Vue.js 应用中安装和使用 Pinia 状态管理库。首先，我们创建了 Pinia 的实例并将其添加到 Vue 应用中。然后，我们定义了一个简单的 store，其中包含一个状态和一个操作，并在组件中使用它。这个例子提供了一个基本的 Pinia 使用入门，并且展示了如何在实际的 Vue.js 项目中应用它。