如何在 Vue 3 项目中使用 Pinia

Pinia 是一个用于 Vue 的简单、易用且灵活的状态管理库。它基于 Composition API，旨在提供类似于 Vuex 的功能，同时解决一些其复杂性带来的问题。Pinia 是轻量级的，并且有很好的 TypeScript 支持。

JJCTO袁龙

1562人浏览 · 2024-07-17 16:13:08

JJCTO袁龙 · 2024-07-17 16:13:08 发布

在现代前端开发中，状态管理库是几乎不可或缺的一部分。Vue 3 为我们提供了一个新的选择——Pinia。它是 Vuex 的替代品，更简洁且功能更加强大。在这篇博客中，我将详细介绍如何在 Vue 3 项目中使用 Pinia，并通过示例代码展示其具体应用。

什么是 Pinia?

安装 Pinia

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

npm install pinia
# or
yarn add pinia

创建 Pinia Store

安装完 Pinia 后，接下来要创建一个存储文件。我们通常会在 src 目录下新建一个 store 文件夹，然后在其中创建我们的 Pinia store。

例如，我们要创建一个管理用户信息的 store，可以在 src/store 文件夹下创建一个 user.js 文件：

import { defineStore } from 'pinia';

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    userInfo: {
      name: '',
      email: ''
    }
  }),
  actions: {
    updateUserInfo(newUser) {
      this.userInfo = newUser;
    }
  }
});

在这个文件中，我们使用了 Pinia 提供的 defineStore 函数，它接受一个对象作为参数。对象的 id 属性指定了 store 的唯一标识符，state 属性定义了 store 的状态，actions 属性定义了一些操作方法。

在项目中使用 Pinia Store

创建好 store 之后，我们需要在 Vue 组件中使用它。首先，在项目的入口文件中注册 Pinia：

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

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

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

接下来，就可以在各个组件中使用我们创建的 store 了。例如，我们在 src/components/UserInfo.vue 中使用之前创建的 user store：

<template>
  <div>
    <h2>用户信息</h2>
    <p>名称: {{ userStore.userInfo.name }}</p>
    <p>邮箱: {{ userStore.userInfo.email }}</p>
    <button @click="changeUserInfo">更新用户信息</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useUserStore } from '@/store/user';

export default defineComponent({
  setup() {
    const userStore = useUserStore();

    const changeUserInfo = () => {
      userStore.updateUserInfo({ name: 'John Doe', email: 'john@example.com' });
    }

    return { userStore, changeUserInfo };
  }
});
</script>

在这个组件中，我们使用 useUserStore 钩子函数来获取 store，并通过 changeUserInfo 方法更新用户信息。通过这种方式，我们可以很方便地在组件中访问和修改 store 中的状态。

响应式状态

Pinia 的状态是响应式的，这意味着当状态发生变化时，Vue 组件会自动更新。例如：

<template>
  <div>
    <input v-model="userStore.userInfo.name" placeholder="输入用户名" />
    <input v-model="userStore.userInfo.email" placeholder="输入邮件地址" />
    <p>名称: {{ userStore.userInfo.name }}</p>
    <p>邮箱: {{ userStore.userInfo.email }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useUserStore } from '@/store/user';

export default defineComponent({
  setup() {
    const userStore = useUserStore();

    return { userStore };
  }
});
</script>

在这个例子中，我们使用了 Vue 的 v-model 指令来双向绑定输入框和 store 中的字段。当用户输入新内容时，store 中的状态也会更新，反之亦然。

使用 Getters

在实际应用中，我们可能还需要一些基于 state 的派生状态。Pinia 也提供了类似 Vuex 的 Getters 用来生成这些派生状态。例如，我们可以在 user.js 文件中添加一个 getter 来获取用户的名字长度：

import { defineStore } from 'pinia';

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    userInfo: {
      name: '',
      email: ''
    }
  }),
  actions: {
    updateUserInfo(newUser) {
      this.userInfo = newUser;
    }
  },
  getters: {
    userNameLength: (state) => state.userInfo.name.length
  }
});

在组件中使用这个 getter：

<template>
  <div>
    <p>名称: {{ userStore.userInfo.name }}</p>
    <p>邮箱: {{ userStore.userInfo.email }}</p>
    <p>名字长度: {{ userStore.userNameLength }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useUserStore } from '@/store/user';

export default defineComponent({
  setup() {
    const userStore = useUserStore();

    return { userStore };
  }
});
</script>