Pinia的安装和使用

最新推荐文章于 2024-04-13 00:24:58 发布
最新推荐文章于 2024-04-13 00:24:58 发布
阅读量499 收藏 3
点赞数 2
文章标签： 前端 javascript vue 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BanQin_Miko/article/details/130289703
版权

本文章原文地址

一、什么是Pinia

​ 如果你学过Vue2，那么你一定使用过Vuex。我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。
​ 在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的Pinia来实现状态管理，来看看官网如何解释Pinia的。
官网解释：

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

​ 从上面官网的解释不难看出，Pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在Pinia的数据允许我们在各个组件中使用。实际上，Pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名Pinia，而没有取名Vuex，所以可以直接将Pinia比作为Vue3的Vuex。

官网地址：https://pinia.web3doc.top/

二、为什么要使用Pinia

  • Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3都能很快上手。
  • Pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，Pinia直接抛弃它了，这无疑减少了我们工作量。
  • Pinia中action支持同步和异步，Vuex不支持
  • 良好的Typescript支持，毕竟Vue3都推荐使用TS来编写，这个时候使用Pinia就非常合适了
  • 无需再创建各个模块嵌套了，Vuex中如果数据过多，通常可以分模块来进行管理，稍显麻烦，而Pinia中每个store都是独立的，互相不影响。
  • 体积非常小，只有1KB左右。
  • Pinia支持插件来扩展自身功能。
  • 支持服务端渲染。

三、准备工作

1、基于Vue3 + TS + Vite创建项目

在合适的目录执行命令

## 搭建 vue项目
npm create vite learn-pinia --template vue-ts

## 进入目录
cd learn-pinia

## 安装依赖
npm install

## 运行项目
npm run dev

2、安装Pinia

npm install pinia

四、搭建Pinia模块

在src下创建store目录，并创建index.ts文件

// 引入pinia 并解构出创建pinia的方法
import { createPinia } from 'pinia'


// 创建pinia
const pinia = createPinia();


// 导出pinia
export default pinia

挂载Pinia

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import pinia from "./store";


createApp(App).use(pinia).mount("#app");

五、Store

1、概念

​ store简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。

2、定义store

首先store目录下创建user.ts文件，主要用来存放与user相关的store。

// 引入defineStore 方法
import { defineStore } from "pinia";

/**
 * Pinia中使用defineStore定义store
 * 第一个参数是应用程序中store的唯一id
 * 第二个参数是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用 use + 模块名 命名
 */
export const useUserStore = defineStore("user", {
  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @return
   */
  state() {
    // 返回age为1
    return {
      /**
       * 年龄
       */
      age: 1,
    };
  },
  // ...其它配置项
});

页面中使用

<template>
  <div>
    <!-- 页面上可以直接使用 -->
    <!-- 你好，我是Pinia。{{ userStore.age }} -->
    你好，我是Pinia。{{ age }}
    <button @click="add">+1</button>
  </div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";

// 使用userStore并返回定义模块的实例
const userStore = useUserStore();

// const add = () => {
//   userStore.age+=1
// };


/**
 * 注意：不能直接从store中解构值
 * 这样会破坏响应式解构，
 */
// 错误
// let { age } = useUserStore();

// 如果要解构可以使用 storeToRefs
let { age } = storeToRefs(userStore);

// 可以直接使用获取属性并修改，并且也会同步重新渲染页面
const add = () => {
  age.value += 1
};
</script>

六、Getters

1、概念

​ getters是defineStore参数配置项里面的另一个属性，前面我们讲了state属性。getter属性值是一个对象，该对象里面是各种各样的方法。可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果，既然它和Vue中的计算属性类似，那么它肯定也是会被缓存的，就和computed一样。

2、基本使用

在user模块定义计算属性

// 引入defineStore 方法
import { defineStore } from "pinia";

/**
 * Pinia中使用defineStore定义store
 * 第一个参数是应用程序中store的唯一id
 * 第二个参数是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用 use + 模块名 命名
 */
export const useUserStore = defineStore("user", {
  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @return
   */
  state() {
    // 返回age为1
    return {
      /**
       * 年龄
       */
      age: 1,
    };
  },
  /**
   * 计算属性在getters对象中定义
   * 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
   *
   * 方法接收一个参数，为当前的state
   */
  getters: {
    // 两倍年龄
    doubleAge: (state) => state.age * 2,
  },
  // ...其它配置项
});

页面中使用

<template>
  <div>
    <!-- 页面上可以直接使用 -->
    你好，我是pinia。{{ userStore.age }}
    计算属性：{{ userStore.doubleAge }}
    <button @click="add">+1</button>
  </div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";

// 使用userStore 并返回定义模块的实例
const userStore = useUserStore();

/**
 * 每次修改计算属性里所依赖的值
 * 计算属性会自动的重新计算
 */
const add = () => {
  userStore.age+=1
};
</script>

3、调用其它getter

// 引入defineStore 方法
import { defineStore } from "pinia";

/**
 * Pinia中使用defineStore定义store
 * 第一个参数是应用程序中store的唯一id
 * 第二个参数是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用 use + 模块名 命名
 */
export const useUserStore = defineStore("user", {
  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @return
   */
  state() {
    return {
      age: 1,
      name: "BanQ"
    };
  },
  /**
   * 计算属性在getters对象中定义
   * 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
   *
   * 方法接收一个参数，为当前的state
   */
  getters: {
    // 两倍年龄
    doubleAge: (state) => state.age * 2,
    /**
     * 我们可以直接在getter方法中调用this，
     * this指向的便是store实例，
     * 所以理所当然的能够调用到其它getter。
     * 注意：不能使用箭头函数的形式, 并且注意要写类型
     */
    getNameAdnAge (): string {
      return this.doubleAge + this.name
    }
  },
});

4、传参

​ 既然getter函数做了一些计算或者处理，那么我们很可能会需要传递参数给getter函数，但是我们前面说getter函数就相当于store的计算属性，和vue的计算属性差不多，那么我们都知道Vue中计算属性是不能直接传递参数的，所以我们这里的getter函数如果要接受参数的话，也是需要做处理的

// 引入defineStore 方法
import { defineStore } from "pinia";

/**
 * Pinia中使用defineStore定义store
 * 第一个参数是应用程序中store的唯一id
 * 第二个参数是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用 use + 模块名 命名
 */
export const useUserStore = defineStore("user", {
  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @return
   */
  state() {
    return {
      age: 1,
      name: "BanQ"
    };
  },
  /**
   * 计算属性在getters对象中定义
   * 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
   *
   * 方法接收一个参数，为当前的state
   */
  getters: {
    getAddAge () {
      /**
       * 在计算属性内部，返回一个方法
       * 该方法会接收一个参数，这个参数就是
       * 页面传过来的参数
       */
      return (num: number) => this.age + num;
    }
  },
});

页面中使用

<div>
    <!-- 页面上使用的时候，需要进行传参 -->
    你好，我是pinia。{{ userStore.getAddAge(100) }}
    <button @click="add">+1</button>
  </div>
</template>

七、Actions

1、概念

​ 前面提到的state和getters属性都主要是数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的data数据和computed计算属性一样。那么，如果我们有业务代码的话，最好就是写在actions属性里面，该属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法

2、基本使用

// 引入defineStore 方法
import { defineStore } from "pinia";

/**
 * Pinia中使用defineStore定义store
 * 第一个参数是应用程序中store的唯一id
 * 第二个参数是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用 use + 模块名 命名
 */
export const useUserStore = defineStore("user", {
  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @return
   */
  state() {
    // 返回age为1
    return {
      /**
       * 年龄
       */
      age: 1,
    };
  },
  /**
   * 计算属性在getters对象中定义
   * 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
   *
   * 方法接收一个参数，为当前的state
   */
  getters: {
    // 两倍年龄
    doubleAge: (state) => state.age * 2,
  },
  /**
   * 当前模块的相关方法在actions里面定义
   * 存放当前模块相关的业务逻辑函数
   */
  actions: {
    /**
     * 与 getters一样，操作可以通过 this 访问当前实例
     * 与它们不同，actions可以是异步的，
     * 您可以在其中await任何API调用甚至其他操作
     * 
     * name 为页面上传过来的参数
     */
    saveName (name: string) {
      this.name = name
    }
  }
});

页面中使用

<template>
  <div>
    <!-- 页面上可以直接使用 -->
    你好，我是pinia。{{userStore.name}}
    <button @click="updateName">修改名字</button>
  </div>
</template>
<script setup lang="ts">
// 引入定义的userStore模块
import { storeToRefs } from "pinia";
import { useUserStore } from "./store/user";

// 使用userStore 并返回定义模块的实例
const userStore = useUserStore();

const updateName = () => {
  // 可以直接使用userStore方法actions里面定义的方法，并调用传参
  userStore.saveName("Miko");
};
</script>

3、调用异步方法

// 引入defineStore 方法
import { defineStore } from "pinia";

const dely = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 1000)
  })
}

/**
 * Pinia中使用defineStore定义store
 * 第一个参数是应用程序中store的唯一id
 * 第二个参数是一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。
 *
 * 返回一个函数使用 use + 模块名 命名
 */
export const useUserStore = defineStore("user", {
  /**
   * 定义当前的模块的state
   * state是一个函数，必须有返回值
   * 返回值就是这个模块的状态
   * @return
   */
  state() {
    // 返回age为1
    return {
      /**
       * 年龄
       */
      age: 1,
    };
  },
  /**
   * 计算属性在getters对象中定义
   * 定义一个方法，方法必须有返回值，返回的值就是这个数算属性的结果
   *
   * 方法接收一个参数，为当前的state
   *
  getters: {
    // 两倍年龄
    doubleAge: (state) => state.age * 2,
  },
  /**
   * 当前模块的相关方法在actions里面定义
   * 存放当前模块相关的业务逻辑函数
   */
  actions: {
    /**
     * 与 getters 一样，操作可以通过 this 访问当前实例
     * 与它们不同，actions可以是异步的，
     * 您可以在其中await任何API调用甚至其他操作
     * 
     * name 为页面上传过的参数
     */
    async saveName (name: string) {
      // 延迟一秒更新
      await dely()
      this.name = name
    }
  }
});

八、自定义插件实现持久化

1、插件介绍

Pinia 插件是一个函数，可以选择返回要添加到 store 的属性。 它需要一个可选参数，一个 context：

export function myPiniaPlugin(context) {
  context.pinia // 使用 `createPinia()` 创建的 pinia
  context.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）
  context.store // 插件正在扩充的 store
  context.options // 定义存储的选项对象传递给`defineStore()`
  // ...
}

2、持久化实现思路

监听state的变化，把每次变化的结果放到localStorage里面。初始化的时候回显数据

import { PiniaPluginContext } from "pinia";

export function persistedstate(context: PiniaPluginContext) {
  // 初始化回显数据
  const shop = JSON.parse(localStorage.getItem(context.store.$id) || "{}");
  context.store.$patch(shop);

  // 订阅每次state的变化
  context.store.$subscribe(
    (_mutation, state) => {
      localStorage.setItem(_mutation.storeId, JSON.stringify(state));
    },
    {
      detached: true,
    }
  );
}

本文章原文地址

半晴Miko
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
通过Vite搭建的Vue项目,里面安装了Vue Router,Pinia和Vant
10-27
通过Vite搭建的Vue项目,里面安装了Vue Router,Pinia和Vant
vue2使用pinia.js的详细教程，踩坑解决方法
weixin_45753961的博客
07-21 3081
pinia不好用，建议别用！
快速搞懂Pinia及数据持久化存储(详细教程)
热门推荐
Ghmin的博客
12-05 2万+
简单搞懂Pinia的使用及使用pinia-plugin-persist插件实现数据持久化存储
Pinia状态管理工具：【Vue3 + Pinia使用】 安装Pinia && Pinia基本使用 && 创建 store仓库 && Pinia持久化存储 && 配置本地存储 && 指定仓库数据存储
Forever_Hopeful的博客
04-13 725
Pinia状态管理工具：【Vue3 + Pinia使用】 安装Pinia && Pinia基本使用 && 创建 store仓库 && Pinia持久化存储 && 配置本地存储 && 指定仓库数据存储
Pinia安装使用和持久化和模块化
qq_44741577的博客
02-03 1813
/ 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)// 第一个参数是你的应用中 Store 的唯一 ID。// 其他配置...})这个名字 ，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。
Vue最新状态管理工具Pinia——Pinia的安装与使用
XSL_HR的博客
05-06 2720
一篇文章带你学会pinia的基本安装和使用
Pinia的安装与使用 【全网最简洁】
qq_47945175的博客
03-23 2505
Pinia是Vue.js 3的状态管理库，使用起来非常简单和直观。
pinia安装使用
m0_63263973的博客
11-30 1561
state是pinia的核心，是存储数据的地方，例如我们要存储一个user对象//第一种写法})//第二种写法return {age:12}}})
Pinia快速入门（这些完全够用）
WLK654321的博客
11-22 473
Vue2和Vue3都支持。 pinia中只有state、getter、action，抛弃了Vuex中的Mutation pinia中action支持同步和异步，Vuex不支持 良好的Typescript支持 无需再创建各个模块嵌套了，pinia中每个store都是独立的，互相不影响。 体积非常小，只有1KB左右。 pinia支持插件来扩展自身功能。 支持服务端渲染。 pinia的优点还有非常多，上面列出的主要是它的一些主要优点，更多细节的地方还需要大家在使用的时候慢慢体会。
四、Pinia 的安装及其基本使用
qq_43683753的博客
10-27 1061
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
轻量级状态管理库 Pinia 实践与演示项目源代码，基本涵盖了pinia的大部分使用场景
最新发布
04-13
轻量级状态管理库 Pinia 实践与演示项目，基本涵盖了pinia的大部分使用场景，对学习人员的引导有着良好的帮助，可以很直观的感受到Pinia 的用法 技术栈： Vue3 + Vite + Pinia2 + NaiveUI 目的：此项目是 Pinia 的...
vue3+Vant+pinia 开箱即用，移动端框架
01-30
5、安装最新pinia插件，配合vue3使用，并处理好数据持久化的问题； 6、已配置vue.config模块中的各种性能和优化处理、路径别名、代理配置、rem适配配置等等； 7、将最新的vue3框架搭建最新的H5移动端项目，开箱即用...
vue3+vite+Pinia 系统教学资源
03-29
Pinia - 构建用户仓库 和 持久化 Pinia - 配置仓库统一管理 pinia 独立维护 \- 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一 \- 优化：由 stores 统一维护，在 stores/index.js 中...
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 ...
Pinia的安装使用
xiaochen_____的博客
03-26 1763
直接性和简洁性：Pinia 的 API 设计简单直接，基于 Vue 3 的 Composition API，使得状态管理变得直观且容易上手。它不需要像 Vuex 那样定义 mutations 和 actions，使得状态管理的代码更加简洁明了。模块化和组合性：Pinia 支持模块化的 Store 设计，每个 Store 可以独立定义自己的状态和操作，并且可以轻松地被其他 Store 组合使用，这种灵活性有助于代码的重用和维护。与 Vue 3 的兼容性。
Pinia 一、介绍、安装
xbczrz的博客
07-12 201
Pinia介绍、安装
pinia 持久化插件pinia-plugin-persistedstate 安装、使用(图文详解)
xuelang532777032的博客
06-08 1万+
5、压缩localStorage 要存的数据，我记得每个浏览器对localStorage 的存储是有限制大小的有的1M 有的6M。序那边博主开头说了，每个浏览器对localStorage 是有限制大小的，你不压缩，有时候你触发了某个bug，你都不知道怎么回事，来，跟着博主操作。3、其实就是省略掉localStorage 这一步，会自己写的小伙伴自己写个也是蛮快的。1、博主vue3、ts 5.x、pinia 2.1.3版本，2、配置stores/index.ts​​​​​​​。1、这个是两个变量（
Pinia的简单使用
Agress726901的博客
05-31 611
Pinia的简单使用
【pinia】pinia的安装：
SunPeng的博客
02-18 125
pinia的安装：
pinia安装测试工具
08-13
您可以使用以下步骤来安装和测试 Pinia： 1. 首先，您需要确保已经安装了 Node.js 和 npm。您可以在终端中运行以下命令来检查是否安装了它们： ``` node -v npm -v ``` 如果显示了版本号，则表示已安装。 2. 接下来，创建一个新的项目文件夹并进入该文件夹： ``` mkdir pinia-test cd pinia-test ``` 3. 在项目文件夹中初始化 npm： ``` npm init -y ``` 这将创建一个默认的 `package.json` 文件。 4. 安装 Pinia： ``` npm install pinia ``` 5. 创建一个测试文件，比如 `test.js`，并在其中引入 Pinia： ```javascript // test.js import { createPinia } from 'pinia' const pinia = createPinia() console.log(pinia) ``` 6. 运行测试文件： ``` node test.js ``` 如果一切正常，您应该看到 Pinia 实例的输出。 这样，您就成功地安装和测试了 Pinia。您可以根据 Pinia 的文档继续使用和配置它来符合您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半晴Miko

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值