Vue 全局状态管理新宠：Pinia实战指南

// 安装Pinia
import { createPinia } from 'pinia'
 
// 创建Pinia实例并传递给Vue
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
 
// 创建一个存储
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})
 
// 在组件中使用存储
<script setup>
import { useCounterStore } from './stores/counterStore'
 
const counterStore = useCounterStore()
</script>
 
<template>
  <button @click="counterStore.increment">{{ counterStore.count }}</button>
</template>

这个例子展示了如何在Vue应用中安装和使用Pinia进行全局状态管理。首先，我们创建了一个名为counter的存储，包含一个状态count和一个动作increment。然后，在Vue组件中，我们通过setup函数引入并使用了这个存储，在模板中展示计数器的值和如何触发增加操作。