首先 

随着Vue 3的推出，其周边的生态也在不断完善，特别是在状态管理方面。在Vue 2中，Vuex是一个广泛使用的状态管理工具，它使得跨组件共享状态变得简单且可维护。Pinia是一个专门为Vue 3设计的状态管理库，它基于Vue 3的Composition API构建，这是一个专为Vue.js设计的状态管理库。Pinia在Vue 3中取代了Vuex，成为新的状态管理解决方案。

使用

安装

yarn add pinia
# 或者使用 npm
npm install pinia

创建一个 pinia 实例 (根 store) 并将其传递给应用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

如果你使用的是 Vue 2，你还需要安装一个插件，并在应用的根部注入创建的 pinia：

js

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 其他配置...
  // ...
  // 请注意，同一个`pinia'实例
  // 可以在同一个页面的多个 Vue 应用中使用。 
  pinia,
})

 介绍

在Pinia（以及之前的Vuex）中，state、getter和action是用于管理Vue应用状态的核心概念。以下是它们的基本解释和用途：

1. State

state 是存储应用状态的地方，它可以是任何类型的值或对象。在Pinia中，state 是一个函数，返回一个包含状态初始值的对象。

示例：

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在这个例子中，count 就是 state 的一部分，存储了计数器的当前值。

2. Getter

getter 是基于 state 的计算属性，它们和Vue组件中的计算属性类似，也是具有缓存的。当 state 发生变化时，只有相关的 getter 会重新计算。

在这个例子中，doubleCount 是一个 getter，它返回 count 的两倍。

3. Action

action 是用于修改 state 的函数。与直接在组件中修改 state 不同，所有的 state 修改都应该通过 action 来完成。这样可以确保状态变更的可追踪性和可预测性。action 还可以包含任意异步或同步的逻辑。

在这个例子中，increment 和 fetchData 都是 action。increment 直接修改了 count 的值，而 fetchData 则执行了一个异步操作，并在完成后更新了 count 的值。

注意：在Pinia中，你可以直接通过 this 关键字来访问 state 和 getters，而在Vuex中，你需要通过 this.$store.state 和 this.$store.getters 来访问它们。这使得Pinia的API更加直观和简洁。

Setup Store​

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

使用 在vue组件中

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
// ❌ 这将不起作用，因为它破坏了响应性
// 这就和直接解构 `props` 一样
const { name, doubleCount } = store
name // 将始终是 "Eduardo"
doubleCount // 将始终是 0
setTimeout(() => {
  store.increment()
}, 1000)
// ✅ 这样写是响应式的
// 💡 当然你也可以直接使用 `store.doubleCount`
const doubleValue = computed(() => store.doubleCount)

// 作为 action 的 increment 可以直接解构

const { increment } = store
</script>

官网链接Pinia (vuejs.org)