博客站

Pinia 是 Vue 3 官方推荐的状态管理库，它比 Vuex 更轻量、更简单，并且与 Vue 3 的 Composition API 完美结合。以下是 Pinia 的详细使用方法：

1. 安装 Pinia

首先，确保你已经安装了 Pinia。如果尚未安装，可以通过以下命令安装：

npm install pinia

2. 创建 Pinia Store

Pinia 的核心概念是 Store，每个 Store 都是一个独立的模块。以下是一个简单的 Pinia Store 示例：

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

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

3. 在 Vue 3 应用中引入 Pinia

在 Vue 3 应用中，通过 app.use(pinia) 将 Pinia 注入到应用中：

// 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');

4. 在组件中使用 Pinia

在 Vue 3 中，可以通过 Composition API 或 Options API 使用 Pinia。

Composition API 中使用 Pinia

在 Composition API 中，可以直接导入并使用 Store。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

export default {
  setup() {
    const counterStore = useCounterStore();

    const count = computed(() => counterStore.count);
    const doubleCount = computed(() => counterStore.doubleCount);

    function increment() {
      counterStore.increment();
    }

    function incrementAsync() {
      counterStore.incrementAsync();
    }

    return {
      count,
      doubleCount,
      increment,
      incrementAsync,
    };
  },
};
</script>

Options API 中使用 Pinia

在 Options API 中，可以通过 mapState、mapActions 等辅助函数使用 Pinia。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'pinia';
import { useCounterStore } from '@/stores/counter';

export default {
  computed: {
    ...mapState(useCounterStore, ['count', 'doubleCount']),
  },
  methods: {
    ...mapActions(useCounterStore, ['increment', 'incrementAsync']),
  },
};
</script>

5. 模块化 Pinia Store

Pinia 天然支持模块化，每个 Store 都是一个独立的模块。你可以根据需要创建多个 Store。

定义多个 Store

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count  ;
    },
  },
});

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

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Alice',
    age: 25,
  }),
  actions: {
    updateName(newName) {
      this.name = newName;
    },
  },
});

在组件中使用多个 Store

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ name }}</p>
    <button @click="increment">Increment</button>
    <button @click="updateName('Bob')">Update Name</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter';
import { useUserStore } from '@/stores/user';
import { computed } from 'vue';

export default {
  setup() {
    const counterStore = useCounterStore();
    const userStore = useUserStore();

    const count = computed(() => counterStore.count);
    const name = computed(() => userStore.name);

    function increment() {
      counterStore.increment();
    }

    function updateName(newName) {
      userStore.updateName(newName);
    }

    return {
      count,
      name,
      increment,
      updateName,
    };
  },
};
</script>

6. Pinia 的优势

• 轻量：Pinia 的代码量比 Vuex 更少，性能更好。
• 简单：Pinia 的 API 设计更简洁，学习成本低。
• TypeScript 支持：Pinia 对 TypeScript 的支持非常好，类型推断非常准确。
• 模块化：每个 Store 都是独立的模块，天然支持模块化。
• Composition API 友好：Pinia 与 Vue 3 的 Composition API 完美结合。

7. 总结

在 Vue 3 中使用 Pinia 的步骤如下：

1. 安装 Pinia：通过 npm install pinia 安装 Pinia。
2. 创建 Store：使用 defineStore 定义 Store，并定义 state、actions 和 getters。
3. 在应用中引入 Pinia：通过 app.use(pinia) 将 Pinia 注入到应用中。
4. 在组件中使用 Store：
   • 在 Composition API 中，直接导入并使用 Store。
   • 在 Options API 中，使用 mapState、mapActions 等辅助函数。
5. 模块化 Store：根据需要创建多个 Store，并在组件中使用。

通过以上步骤，你可以在 Vue 3 中高效地使用 Pinia 进行状态管理。Pinia 的简洁性和强大功能使其成为 Vue 3 状态管理的首选工具。