pinia 是 Vue3 的一个状态管理库，用于帮助开发者更高效、更简洁地管理 Vue3 组件的状态。

下面是 Pinia 中存储和获取数据的使用方法：

存储数据

要存储数据，首先需要定义一个 Pinia store，如下所示：

import { defineStore } from "pinia"export const store = defineStore({  id: "app",  state: () => ({    count: 0,    todos: []  }),  actions: {    increment() {      this.count++    },    addTodo(todo) {      this.todos.push(todo)    }  }})

上面的例子中，我们定义了一个名为 store 的 Pinia store，该 store 包含一个名为 count 的计数器和一个名为 todos 的数组。

要存储数据（即更新 count 或 todos），我们可以在组件中使用 store 中的 actions，如下所示：

<template>  <div>    <p>Count: {{ count }}</p>    <button @click="increment">+</button>  </div></template><script>import { useStore } from "pinia"import { store } from "./store"export default {  setup() {    const count = useStore(store)        function increment() {      count.increment()    }        return {      count,      increment    }  }}</script>

上面的例子中，我们使用了 useStore 和 store，来定义一个 count 将组件与 store 绑定在一起。然后我们在 increment() 方法中调用了 count 中的 increment() 方法，该方法实现了计数器的增量操作。

我们可以使用类似的方式来更新 todos 数组。例如，我们可以使用 addTodo() 方法将一个新的 todo 对象添加到 todos 数组中。

获取数据

要获取已存储的数据，我们可以使用 computed 属性或 watchEffect() 方法。例如，如果我们在组件中想要获取当前 count 的值，可以使用如下方式：

<template>  <div>    <p>Count: {{ count }}</p>    <button @click="increment">+</button>  </div></template><script>import { useStore } from "pinia"import { store } from "./store"export default {  setup() {    const count = useStore(store)    return {      count    }  }}</script>

上面的例子中，我们在 setup() 方法中使用 useStore(store) 来获取全局的 store 对象，然后通过 count 属性将 store 中的 count 状态绑定到组件中。这样，在模板中我们就可以直接使用 {{ count }} 来渲染当前的计数器值。

如果我们在组件中需要监听 count 的变化，可以使用 watchEffect() 方法来实现。例如，如果我们想要在 count 增量时触发一些其他的功能，可以使用如下方式：

<template>  <div>    <p>Count: {{ count }}</p>    <button @click="increment">+</button>  </div></template><script>import { useStore } from "pinia"import { store } from "./store"import { watchEffect } from "vue"export default {  setup() {    const count = useStore(store)        watchEffect(() => {      console.log(`Count changed to ${count.count}`)    })        function increment() {      count.increment()    }        return {      count,      increment    }  }}</script>

上面的例子中，我们使用 watchEffect() 方法来监听 count 的变化。当 count 的值发生变化时，回调函数将被触发，并输出新的