pinia使用方法

最新推荐文章于 2025-03-11 20:11:40 发布
最新推荐文章于 2025-03-11 20:11:40 发布
阅读量844 收藏 8
点赞数 12
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdnuu123/article/details/143574522
版权

1. 安装 Pinia

首先，确保你已经安装了 Pinia。

npm install pinia

2. 配置 Pinia

在你的 main.ts 或 main.js 中，创建 Pinia 实例并将其注册到 Vue 应用中。

// main.ts 或 main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia'; // 导入 Pinia
import App from './App.vue';

const app = createApp(App);

const pinia = createPinia(); // 创建 Pinia 实例
app.use(pinia);  // 将 Pinia 添加到 Vue 应用中

app.mount('#app');

3. 定义 Pinia Store

在 src/stores 目录下创建一个 authStore.ts 文件，用于管理用户的登录状态和账户信息。

// src/stores/authStore.ts
import { defineStore } from 'pinia';

// 定义 User 类型
interface User {
  id: number;
  username: string;
  email: string;
  score: number;
}

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,  // 用户是否登录
    user: {} as User,   // 存储用户信息
  }),

  getters: {
    // getter 用于从 state 中派生数据
    userName: (state) => state.user.username, // 获取用户的用户名
    userScore: (state) => state.user.score,   // 获取用户的积分
  },

  actions: {
    // actions 用于修改 state 中的数据
    login(userData: User) {
      this.user = userData;       // 更新用户信息
      this.isLoggedIn = true;     // 更新登录状态
    },
    
    logout() {
      this.user = {} as User;     // 清空用户信息
      this.isLoggedIn = false;    // 更新登录状态
    },

    // 示例：增加用户积分的 action
    increaseScore(amount: number) {
      if (this.isLoggedIn) {
        this.user.score += amount; // 增加积分
      }
    }
  }
});

4. 使用 Pinia Store

在 Vue 组件中，可以通过 useAuthStore() 引入并使用 store。在登录时调用 login 方法更新状态，获取用户数据时可以直接使用 getters。

<!-- src/components/Login.vue -->
<template>
  <div>
    <h1 v-if="!authStore.isLoggedIn">Login</h1>
    <h1 v-else>Welcome, {{ authStore.userName }}!</h1>

    <div v-if="!authStore.isLoggedIn">
      <input v-model="username" placeholder="Username" />
      <input v-model="email" placeholder="Email" />
      <button @click="login">Login</button>
    </div>

    <div v-else>
      <button @click="logout">Logout</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/authStore';

const authStore = useAuthStore();
const username = ref('');
const email = ref('');

// 登录操作
function login() {
  const user = {
    id: 1,
    username: username.value,
    email: email.value,
    score: 100,
  };
  authStore.login(user);  // 调用 store 的 login 方法
}

// 登出操作
function logout() {
  authStore.logout();  // 调用 store 的 logout 方法
}
</script>

5. Pinia中的 Getters 和 Actions 的区别

  • Getters：
    • 目的：用来从 state 中派生或计算数据。
    • 特点：是 只读的，不直接修改 state，通常用于对 state 中的数据进行处理或者返回某种计算结果。
    • 使用场景：计算派生状态（例如，获取用户的用户名、积分等）。
  • Actions：
    • 目的：用来 修改 state 和 执行异步操作（如 API 请求）。
    • 特点：通过 this 访问 state 和 getters，并可以修改 state 或执行副作用（比如调用 API 或者增加积分）。
    • 使用场景：修改应用状态，触发异步操作（如用户登录、登出等）。
示例：Getters 和 Actions 的区别
export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,
    user: {} as User,
  }),

  getters: {
    // Getter 用于从 state 派生信息，不能修改 state
    userName: (state) => state.user.username,
    userScore: (state) => state.user.score,
  },

  actions: {
    // Action 用于修改 state，执行异步操作
    login(userData: User) {
      this.user = userData;   // 修改 state
      this.isLoggedIn = true; // 更新登录状态
    },

    logout() {
      this.user = {} as User; // 清空用户数据
      this.isLoggedIn = false; // 设置为未登录
    },

    increaseScore(amount: number) {
      if (this.isLoggedIn) {
        this.user.score += amount; // 修改 state
      }
    },
  }
});

6. Pinia 持久化状态（可选）

如果你希望在页面刷新时保持用户的登录状态，可以使用插件将状态持久化到 localStorage 或 sessionStorage。

首先安装持久化插件：

npm install pinia-plugin-persistedstate

然后在 main.ts 中启用该插件：

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persistedstate'; // 导入插件
import App from './App.vue';

const app = createApp(App);

const pinia = createPinia();
pinia.use(piniaPersist); // 启用持久化插件

app.use(pinia);

app.mount('#app');

在 store 中启用持久化：

// src/stores/authStore.ts
import { defineStore } from 'pinia';

interface User {
  id: number;
  username: string;
  email: string;
  score: number;
}

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,
    user: {} as User,
  }),

  actions: {
    login(userData: User) {
      this.user = userData;
      this.isLoggedIn = true;
    },

    logout() {
      this.user = {} as User;
      this.isLoggedIn = false;
    },
  },

  persist: true,  // 启用持久化
});

在 Pinia 中，除了 state、getters 和 actions 外，还可以使用 钩子（Hooks）来处理特定的生命周期事件，类似于 Vue 的生命周期钩子。Pinia 提供了几个常用的钩子来增强 store 的功能，下面是如何使用这些钩子的完整示例。

7.Pinia 提供的钩子

  1. $onAction：监听 actions 被调用的事件。
  2. $patch：用来部分修改 store 的 state，类似于 Vuex 中的 mutation。
  3. $subscribe：监听 store 的变化，类似于 Vuex 中的 getter 和 mutation 订阅。
  4. $dispose：销毁 store。

示例：使用钩子

假设我们有一个用户登录状态的 store，下面演示如何使用钩子来监听 actions 和 state 的变化。

1. 在 store 中使用钩子
// src/stores/authStore.ts
import { defineStore } from 'pinia';

// 定义 User 类型
interface User {
  id: number;
  username: string;
  email: string;
  score: number;
}

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false, // 用户是否登录
    user: {} as User,  // 存储用户信息
  }),

  getters: {
    userName: (state) => state.user.username,
    userScore: (state) => state.user.score,
  },

  actions: {
    login(userData: User) {
      this.user = userData;
      this.isLoggedIn = true;
    },

    logout() {
      this.user = {} as User;
      this.isLoggedIn = false;
    },

    increaseScore(amount: number) {
      if (this.isLoggedIn) {
        this.user.score += amount;
      }
    },
  },

  // 监听 action 的钩子
  persist: true,

  // 在 store 被创建时调用的钩子
  $onAction: (context) => {
    console.log('Action was called', context);
    // 可以使用 context 来获取 action 的名称和参数
  },

  // 在 store 的 state 发生变化时调用
  $subscribe: (mutation) => {
    console.log('Store changed', mutation);
    // mutation 包含了变化的类型和发生的状态
  },

  // 在 store 销毁时调用的钩子
  $dispose: () => {
    console.log('Store disposed');
  },
});
2. 在组件中使用钩子

在组件中调用 Pinia store 时，我们也可以利用钩子来处理一些业务逻辑，例如在登录成功后修改页面内容、发送消息等。

<!-- src/components/Login.vue -->
<template>
  <div>
    <h1 v-if="!authStore.isLoggedIn">Login</h1>
    <h1 v-else>Welcome, {{ authStore.userName }}!</h1>

    <div v-if="!authStore.isLoggedIn">
      <input v-model="username" placeholder="Username" />
      <input v-model="email" placeholder="Email" />
      <button @click="login">Login</button>
    </div>

    <div v-else>
      <button @click="logout">Logout</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useAuthStore } from '@/stores/authStore';

const authStore = useAuthStore();
const username = ref('');
const email = ref('');

// 登录操作
function login() {
  const user = {
    id: 1,
    username: username.value,
    email: email.value,
    score: 100,
  };
  authStore.login(user);  // 调用 store 的 login 方法
}

// 登出操作
function logout() {
  authStore.logout();  // 调用 store 的 logout 方法
}

// 组件挂载时触发
onMounted(() => {
  console.log('Component mounted');
  authStore.$subscribe((mutation) => {
    console.log('Mutation occurred:', mutation);
  });
});

// 组件卸载时触发
onBeforeUnmount(() => {
  console.log('Component will unmount');
  authStore.$dispose();  // 清理 store 的钩子
});
</script>
3. 使用 $onAction 和 $subscribe
  • $onAction：它会在每次调用 store 中的 action 时触发，可以用来记录或执行副作用。
  • $subscribe：它会监听 store 的 state 变化，当 state 被修改时，$subscribe 会收到 mutation 通知，可以用来做额外的响应（如缓存、发送请求等）。
4. 使用持久化存储和钩子

如果你希望在应用重载时保留 store 状态（例如登录信息），可以结合 Pinia 的持久化插件使用。

// src/stores/authStore.ts
import { defineStore } from 'pinia';
import piniaPersist from 'pinia-plugin-persistedstate'; // 插件

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isLoggedIn: false,
    user: {} as User,
  }),

  actions: {
    login(userData: User) {
      this.user = userData;
      this.isLoggedIn = true;
    },
    logout() {
      this.user = {} as User;
      this.isLoggedIn = false;
    },
  },

  // 启用持久化
  persist: true, // 状态持久化
  $onAction: (context) => {
    console.log('Action called:', context);
  },

  $subscribe: (mutation) => {
    console.log('Store changed:', mutation);
  },

  $dispose: () => {
    console.log('Store disposed');
  },
});
5. 总结：钩子的功能和使用

Pinia 提供的钩子机制可以帮助我们监听 store 的状态变化、捕获 action 的调用，以及处理一些副作用，增强了 store 的灵活性。

  • $onAction：监听 actions 的调用，可用于记录日志、调试等。
  • $subscribe：监听 store 的 state 变化，用于响应式操作。
  • $dispose：销毁 store 时触发，可以做一些清理工作。

在使用这些钩子时，可以帮助你更好地管理 store 的状态变化，并且便于扩展和维护。

Pinia使用方法
satlu的博客
04-11 444
学过vue2的都知道vuex状态管理，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。基本的数据读写已经能满足大部分的情况，当然，pinia还提供了其他的方法来方便我们的使用，比如重置数据为初始值的$reset，同时修改多个属性的$patch。我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。3.获取stores。
Pinia使用方法，数据持久化
qq_35496811的博客
05-11 1122
2、 建立事件监听，在pinia添加导入导出的方法，在当页面刷新前将pinia中数据导出，保存到localstorage或indexedDB中，刷新好后再取出数据保存回pinia中。1、使用插件如 pinia-plugin-persistedstate。pinia数据持久化。
pinia-vue3-example:使用vue-next和pinia @ next的示例
05-13
Pinia的Vue 3示例 用法 yarn yarn dev 然后使用检查。 有关的
pinia的使用
m0_75085583的博客
11-24 1222
这就是 Pinia 的基本使用要求，通过合理地定义 store、操作状态，并在组件中使用，可以有效地管理 Vue 应用中的状态。首先，确保你的项目已经安装了 Vue.js（版本 3.x）。如果没有，请先安装 Vue。在你的 Vue 应用中，需要将 Pinia 挂载到 Vue 实例上。
Pinia的使用
weixin_74090771的博客
03-11 952
该文章讲解了Pinia的详细使用
Pinia的简单使用
m0_61591740的博客
06-26 1662
Pinia的简单使用
Pinia使用方法及持久化存储
热门推荐
前端学习笔记
03-24 2万+
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。它跟Vuex有一定的相似度，但还是有很大的区别。愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。Pinia 官方文档。
Pinia的使用方法
m0_68331234的博客
07-07 2567
作用Pinia 是 Vue.js 的轻量级状态管理库，他可以在组件和页面间共享状态。 使用它的原因 创建store, 页面或组件中导入定义好的业务store，并调用userStore()。 （1）在main.js （2）store/userStore.js (3) 在组件中使用 actions的使用 前置条件 在pinia中没有mutations，只有actions，不管是同步还是异步的操作，都可以在actions中定义。步骤 定义同步方法定义异步方法：同上（1）在userSotre的actions中提
pinia的简单用法
weixin_51173554的博客
12-07 3286
pinia的基本使用及数据持久化
一文搞懂Pinia的使用【简洁易懂】
weixin_62765236的博客
10-21 1万+
一文搞懂Pinia的使用【简洁易懂】
vite+vue3动态模块化导入并使用pinia
03-25
4. **使用Pinia**：Vue3组件内，可以使用`useStore`函数来获取对应的Pinia store实例，然后直接调用store中的方法或访问状态。这样，组件就能根据需要即时获取和修改状态，同时避免了不必要的初始加载开销。 5. **...
Vue3入门 - Pinia使用（替代Vuex）
觉醒法师的专栏
09-10 3520
在创建项目时，一般会有选项可以选择是否安装Pinia，选择是即可。如果创建项目里错过了也没关系，通过命令安装即可。pinia是Vue的存储库，它允许您跨组件/页面共享状态。它Vuex的替代品，其功能和性能更优于vuex，在后期使用中会逐渐被大家发现。这里我们先使用pinia全局存储用户信息、接口访问令牌、菜单列表等数据，当然这些只是作为一个项目的基础部分，其他共享信息可根据你们的项目需求进行添加。
pinia的具体使用方法
zsj702177的博客
02-23 3009
pinia的具体使用方法 1.安装(pinia支持Vue2和Vue3) 安装需要@next因为pinia2处于beta的阶段,pinia2是对应的Vue3的版本 //使用npm npm install pinia@next //使用yarn yarn add pinia@next 2.核心概念与基本使用 Store是一个保存状态和业务逻辑的实体，可以自由的读取和写入，并且通过导入setup中使用 创建一个store import { defineStore } from 'pinia' //定义容器 /
在VUE3中使用Pinia
lemon_sugar的博客
08-17 1889
在VUE3中使用pinia
Pinia（基本用法）
weixin_66909686的博客
01-26 4979
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态
pinia的基本使用
weixin_59244784的博客
01-03 489
pinia的基本使用
pinia 基础用法
wxid_mtnujb6ipc0322的博客
11-06 204
Pinia 是一个基于 Vue3 的状态管理库，它提供了简单且强大的方法来管理应用程序的状态。
pinia使用教程（vue3版本）
jwq
01-03 522
pinia使用教程（vue3版本）
pinia，以及pinia的使用方法
最新发布
04-02
好的，用户想了解Pinia以及它的使用方法。首先我需要回忆Pinia的基本概念，它是Vue的状态管理库，由Vue核心团队维护，作为Vuex的替代品。然后要说明它的优点，比如更简洁的API、TypeScript支持、模块化设计等。 接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值