Vue 3 中Pinia状态管理库的使用

news2024/11/9 1:52:29

Pinia 是 Vue 3 的状态管理库，旨在替代 Vuex，提供更简洁和更灵活的 API。以下是如何在 Vue 3 项目中使用 Pinia 的详细步骤。

1. 安装 Pinia

首先，你需要在你的 Vue 3 项目中安装 Pinia。你可以使用 npm 或 yarn 进行安装：

npm install pinia

或者

yarn add pinia

2. 创建 Pinia 实例

在你的 Vue 3 应用中创建一个 Pinia 实例并将其添加到应用中。通常在 main.js 文件中进行配置。

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

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

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

3. 创建一个 Store

Pinia 的状态管理是通过 store 来实现的。你可以在 src/stores 目录下创建一个新的 store 文件，例如 useCounterStore.js：

// src/stores/useCounterStore.js
import { defineStore } from 'pinia';

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

4. 在组件中使用 Store

现在你可以在 Vue 组件中使用这个 store 了。以下是一个示例组件 Counter.vue：

<template>
  <div>
    <h1>Count: {{ counter.count }}</h1>
    <h2>Double Count: {{ counter.doubleCount }}</h2>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/useCounterStore';

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  },
};
</script>

<style scoped>
/* 你的样式 */
</style>