pinia的使用

最新推荐文章于 2025-05-28 10:35:41 发布

原创最新推荐文章于 2025-05-28 10:35:41 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端

一、安装 Pinia

首先，确保你的项目已经安装了 Vue.js（版本 3.x）。如果没有，请先安装 Vue。
然后使用包管理器（如 npm 或 yarn）安装 Pinia：
- 通过 npm 安装：npm install pinia
- 通过 yarn 安装：yarn add pinia
在你的 Vue 应用中，需要将 Pinia 挂载到 Vue 实例上。在main.js（或main.ts）文件中：
- 导入createApp（如果使用 Vue 3）和Pinia：

import { createApp } from 'vue';
import { createPinia } from 'pinia';

创建一个 Pinia 实例：const pinia = createPinia();
将 Pinia 挂载到 Vue 应用：

const app = createApp(App);
app.use(pinia);
app.mount('#app');

二、定义 Store（状态仓库）

创建一个.js或.ts文件来定义你的 store。例如，userStore.js（假设是管理用户相关状态的 store）。
导入defineStore函数：
- 如果是 JavaScript 文件：import { defineStore } from 'pinia';
- 如果是 TypeScript 文件，可能还需要一些类型定义：import { defineStore } from 'pinia';import { ref } from 'vue';
使用defineStore函数来定义 store。它接受两个参数：
- 第一个参数是 store 的唯一标识符（通常是一个字符串），例如'user'。这个标识符在整个应用中应该是唯一的，用于区分不同的 store。
- 第二个参数是一个函数，该函数返回一个包含状态、操作等的对象。
- 示例定义一个简单的用户 store：

export const useUserStore = defineStore('user', () => {
  const user = ref({
    name: 'John Doe',
    age: 30
  });
  function updateName(newName) {
    user.value.name = newName;
  }
  return {
    user,
    updateName
  };
});

这里定义了一个名为user的 store。它有一个user状态，初始值是一个包含name和age属性的对象。还有一个updateName操作函数，用于更新用户的名字。

三、在组件中使用 Store

在 Vue 组件中使用 store，首先要导入定义好的 store。例如，在一个.vue组件文件中：
- 导入之前定义的userStore：import { useUserStore } from '@/stores/userStore';
在组件的setup函数（Vue 3）中获取 store 实例：
- const userStore = useUserStore();
读取状态：
- 可以直接访问 store 中的状态。例如，在模板中显示用户名字：

<template>
  <div>
    {{ userStore.user.name }}
  </div>
</template>

或者在setup函数中使用：

setup() {
  const userStore = useUserStore();
  console.log(userStore.user.name);
  return {
    userStore
  };
}

调用操作（actions）：
- 例如，当用户点击一个按钮来更新名字时，可以在组件的方法中调用 store 中的操作函数。在模板中：

<template>
  <div>
    <button @click="updateName('Jane Doe')">Update Name</button>
  </div>
</template>

在setup函数中定义updateName方法并调用 store 的操作：

setup() {
  const userStore = useUserStore();
  function updateName(newName) {
    userStore.updateName(newName);
  }
  return {
    userStore,
    updateName
  };
}

四、状态持久化（可选）

如果想在页面刷新后保留 store 中的状态，可以使用插件来实现状态持久化。例如，使用pinia-plugin-persistedstate插件。
安装插件：
- 通过 npm 安装：npm install pinia - plugin - persistedstate
- 通过 yarn 安装：yarn add pinia - plugin - persistedstate
在main.js（或main.ts）中配置插件：
- 导入插件：import { createPinia } from 'pinia';import piniaPluginPersistedstate from 'pinia - plugin - persistedstate';
- 创建 Pinia 实例并应用插件：

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

配置持久化选项：
- 在定义 store 时，可以指定哪些状态需要持久化。例如：

export const useUserStore = defineStore('user', () => {
  const user = ref({
    name: 'John Doe',
    age: 30
  });
  function updateName(newName) {
    user.value.name = newName;
  }
  return {
    user,
    updateName
  };
},{
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user',
        storage: localStorage
      }
    ]
  }
});