state

实例

实例

好的，让我为你提供一个简单的示例代码，演示如何使用 Pinia 进行状态管理。在这个示例中，我们将创建一个包含计数器的简单应用，展示如何使用 Pinia 来管理计数器的状态。 首先，确保你的项目已经安装了 Vue 3 和 Pinia。你可以通过 npm 或 yarn 来安装它们：

npm install vue@next @pinia/vue@next

或者

yarn add vue@next @pinia/vue@next

接下来，我们将创建一个 Pinia store 来管理计数器的状态。在你的应用中创建一个名为 counterStore.js 的文件，并添加以下代码：

import { defineStore } from 'pinia'
// 定义一个名为 counter 的 store
export const useCounterStore = defineStore('counter', {
  // 在 store 中定义状态和操作
  state: () => ({
    count: 0,
  }),
  actions: {
    // 增加计数器的值
    increment() {
      this.count++
    },
    // 减少计数器的值
    decrement() {
      this.count--
    },
  },
})

现在，我们已经定义了一个简单的 Pinia store，接下来我们将在我们的应用中使用它。在你的 Vue 组件中，可以像这样使用该 store：

<template>
  <div>
    <p>当前计数：{{ counter }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
<script>
import { useCounterStore } from './counterStore'
export default {
  // 使用 useCounterStore() hook 获取 counter store 实例
  setup() {
    const counterStore = useCounterStore()
    // 从 store 中获取计数器的值和操作
    const counter = counterStore.count
    const increment = counterStore.increment
    const decrement = counterStore.decrement
    return { counter, increment, decrement }
  },
}
</script>

在这个示例中，我们首先导入了之前定义的 useCounterStore hook，然后在 setup 函数中使用它来获取 counter store 的实例。接着，我们从 store 实例中获取了计数器的值和操作，并将它们绑定到模板中。 这样，我们就完成了一个简单的使用 Pinia 进行状态管理的示例。通过这个示例，你可以看到如何定义和使用 Pinia store，并在组件中管理应用程序的状态。

指向原始笔记的链接