Vue——状态管理库Pinia

这篇具有很好参考价值的文章主要介绍了Vue——状态管理库Pinia。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面:本文参考小满大牛的pinia专栏

一、Vuex与Pinia

Vuex 和 Pinia 均是 Vue.js 的状态管理库,它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。

Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation、action 和 getter。其中,state 代表应用程序的状态数据,在 Vuex 中存储为唯一的来源,mutation 用于修改状态数据并确保数据变化的可追踪性,action 用于处理异步操作或组合多个 mutation 操作,getter 可以让我们对 state 进行计算和派生,并使其变得更加易于访问。一个 Vuex store 实例是一个全局 JavaScript 对象,可以在所有组件中通过注入来进行访问和操作。

Pinia 是一个新的状态管理库,也是专门为 Vue 3 开发的。它提供了一个类似于 Vuex 的状态管理模式,但采用最新的 Vue 3 API 构建。相比 Vuex,Pinia 更简单、更轻量,更加灵活,并支持 TypeScript 类型检查。

与 Vuex 相比,Pinia 没有严格的命名约定,可以自由拆分逻辑、支持独立实例、执行更轻量级的代码等。但不同于 Vuex,它并没有内置支持模块化和严格调试工具

以下是Pinia的特点

  • 完整的 ts 的支持;
  • 足够轻量,压缩后的体积只有1kb左右;
  • 去除 mutations,只有 state,getters,actions;
  • actions 支持同步和异步;
  • 代码扁平化没有模块嵌套,只有 store 的概念,store 之间可以自由使用,每一个store都是独立的
  • 无需手动添加 store,store 一旦创建便会自动添加;
  • 支持Vue3 和 Vue2

Pinia官方文档

二、安装、引入Pinia

安装:npm install piniayarn add pinia
引入注册:
Vue3的引入方法
main.ts

import { createApp } from 'vue'
import App from './App.vue'
// Vue3的引入方法
import {createPinia} from 'pinia'

const store = createPinia()

let app = createApp(App)
 
app.use(store)

app.mount('#app')

Vue2的引入方法
main.ts

import { createPinia, PiniaVuePlugin } from 'pinia'
 
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
 
new Vue({
  el: '#app',
  pinia,
})

三、初始化创建Store

新建文件夹
Vue——状态管理库Pinia
index.ts用于管理仓库,store-name.ts用于存储所有枚举的仓库名。
store-name.ts

// 枚举所有仓库名并暴露
export const enum Names {
    TEST = 'TEST'
}

index.ts

// 导入定义仓库的方法
import { defineStore } from "pinia";
// 导入枚举的所有仓库名
import { Names } from "./store-name";

// defineStore()定义一个仓库,第一个参数作为名称,也可看作是id
// 这个id(名称)是必要的,Pinia使用它来讲store连接DevTools,可以通过调试工具查看
export const useTestStore = defineStore(Names.TEST, {
    state: () => {
        return {
            // 定义初始化的值
            current: 1,
            name: '小5'
        }
    },
    // 类似于computed可以帮我们修饰我们的值
    getters: {

    },
    // 可以操作异步 和 同步 提交state
    actions: {

    }
})

简单的使用仓库的数据
App.vue

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();
</script>

<style lang="scss" scoped></style>

结果展示:
Vue——状态管理库Pinia

四、修改State值的五种方式

1.直接修改

State是允许不在仓库中直接修改值的,这与Vuex不同,Vuex要通过commitdispatch方法调用仓库修改。

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
  <div style="display: flex; flex-direction: column">
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();

const change = () => {
  Test.current++;
};
</script>

<style lang="scss" scoped></style>

2.批量修改

在仓库的实例上有$patch方法可以批量修改多个值

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
  <div style="display: flex; flex-direction: column">
    <button @click="bulkChange">批量change</button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();

const bulkChange = () => {
  Test.$patch({
    current: 888,
    name: "小4",
  });
};
</script>

<style lang="scss" scoped></style>

3.批量修改工厂函数形式

推荐使用函数形式 可以自定义修改逻辑

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
  <div style="display: flex; flex-direction: column">
    <button @click="funChange">工厂函数实现批量change</button>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();

const funChange = () => {
  Test.$patch((state) => {
    (state.current = 999), (state.name = "小3");
  });
};
</script>

<style lang="scss" scoped></style>

4.通过原始对象修改整个实例

$state您可以通过将store的属性设置为新对象来替换store的整个状态

缺点就是必须修改整个对象的所有属性,可以用结构赋值的方式解决这个缺点。

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
  <div style="display: flex; flex-direction: column">
    <button @click="allChange">必须修改全部的写法(不推荐写法)</button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();

const allChange = () => {
  Test.$state = {
    ...Test.$state,
    name: "小2",
  };
};
</script>

<style lang="scss" scoped></style>

5.通过actions修改

在仓库中定义Actions
在仓库的actions 中直接使用this就可以指到state里面的值
store/index.ts

import { defineStore } from "pinia";
import { Names } from "./store-name";

export const useTestStore = defineStore(Names.TEST, {
    state: () => {
        return {
            current: 1,
            name: '小5'
        }
    },
    getters: {

    },
    // 可以操作异步 和 同步 提交state
    actions: {
        // 不能写箭头函数 否则this会指向错误
        setCurrent(num:number) {
            this.current = num
        }
    }
})

直接在App.vue实例中调用

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
  <div style="display: flex; flex-direction: column">
    <button @click="actionsChange">使用actions修改</button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();

const actionsChange = () => {
  Test.setCurrent(555);
};
</script>

<style lang="scss" scoped></style>

6.结果展示

App.vue

<template>
  <div>pinia-current:{{ Test.current }}</div>
  <div>pinia-name:{{ Test.name }}</div>
  <div style="display: flex; flex-direction: column">
    <button @click="change">change</button>
    <button @click="bulkChange">批量change</button>
    <button @click="funChange">工厂函数实现批量change</button>
    <button @click="allChange">必须修改全部的写法(不推荐写法)</button>
    <button @click="actionsChange">使用actions修改</button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();

const change = () => {
  Test.current++;
};
const bulkChange = () => {
  Test.$patch({
    current: 888,
    name: "小4",
  });
};
const funChange = () => {
  Test.$patch((state) => {
    (state.current = 999), (state.name = "小3");
  });
};
const allChange = () => {
  Test.$state = {
    ...Test.$state,
    name: "小2",
  };
};
const actionsChange = () => {
  Test.setCurrent(555);
};
</script>

<style lang="scss" scoped></style>

结果展示:
Vue——状态管理库Pinia

五、解构store

在Pinia是不允许直接解构state的数据的,数据会失去响应式。

const Test = useTestStore()
// 直接解构失去响应式
const { current, name } = Test

差异对比:

<template>
  <div>响应式的值:{{ Test.current }}</div>
  <div>解构出的非响应式值:{{ current }}--{{ name }}</div>
  <button @click="change">change</button>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();
const { current, name } = Test;
const change = () => {
  Test.current++;
};
</script>

<style lang="scss" scoped></style>

结果展示:
Vue——状态管理库Pinia
解决方案:
使用pinia的storeToRefs()方式将数据响应式化。如下:

// 引入
import { storeToRefs } from "pinia";
import { useTestStore } from "./store";

const Test = useTestStore();
// 响应式化
const { current, name } = storeToRefs(Test);
const change = () => {
  Test.current++;
};

结果展示:
Vue——状态管理库Pinia

六、actions和getters

store/index.ts

import { defineStore } from "pinia";
import { Names } from "./store-name";

type User = {
    name: string,
    age: number
}

let result:User = {
    name: '小5',
    age: 18
}

const Login = (): Promise<User> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                name: "小4",
                age: 17
            })
        })
    })
}

export const useTestStore = defineStore(Names.TEST, {
    state: () => {
        return {
            // 类型断言
            // <type>{} 通常用于类型断言,表示将某个值强制转换成指定的类型。
            user: <User>{},
            name: 'xiao5'
        }
    },
    // 类似于computed可以帮我们修饰我们的值
    getters: {
        newName(): string {
            return `$-${this.name}`
        }
    },
    // 可以操作异步 和 同步
    actions: {
        // 不能写箭头函数 否则this会指向错误
        // 同步
        setUser1() {
            this.user = result
            this.name = '小8'
        },
        // 异步
        async setUser2() {
            const result = await Login()
            this.user = result
            this.name = '小7'
        },
    }
})

App.vue

<template>
  <div>actions:{{ Test.user }}</div>
  <button @click="change1">同步</button>
  <button @click="change2">异步</button>
  <div>getters:{{ Test.newName }}</div>
</template>

<script setup lang="ts">
import { useTestStore } from "./store";

const Test = useTestStore();
const change1 = () => {
  Test.setUser1();
};
const change2 = () => {
  Test.setUser2();
};
</script>

<style lang="scss" scoped></style>

结果展示:
Vue——状态管理库Pinia
另外,多个actions可以相互调用,多个getters也可以相互调用。

七、API

1.$reset

重置store到它的初识状态

import { useTestStore } from "./store";
const Test = useTestStore();
const reset = () => {
  Test.$reset();
};

2.$subscribe

用于订阅state的改变,只要有state的变化就会触发这个函数
$subscribe的第一个参数是个回调函数

Test.$subscribe((args, state) => {
  console.log("======>", args);
  console.log("======>", state);
});

返回值args主要包括effecttargetstoreId等信息,state是state数据变化后的状态。如下图
Vue——状态管理库Pinia
第二个参数是是一个配置对象

Test.$subscribe(
  (args, state) => {
    console.log("======>", args);
    console.log("======>", state);
  },
  {
    detached: true,
    deep: true,
    flush: "post",
  }
);

这三种配置详细如下:
detached(脱离状态):指组件从其父级组件或 DOM 树中被移除的状态。在这种状态下,组件不再接收更新,并且可以被销毁。Vue 2.x 中通过调用 $destroy() 方法来销毁组件,Vue 3.x 中则使用 teleport、keepAlive 等组合来控制组件的生命周期。

deep(深度监听):指对一个对象进行深度监听,在该对象的所有属性的值发生改变时,都能够得到通知。在 Vue.js 中,可以使用 vm.$watch() 方法来实现对数据的深度监听,Vue 3.x 中也提供了相应的 API 实现深度监听。

flush(刷新策略):指一种更新数据后如何刷新页面的策略。在 Vue.js 中,默认的刷新策略是异步批处理模式(nextTick 模式),即将所有数据的更新操作放入一个队列中,在下一个 tick 执行更新操作,以减少不必要的 DOM 操作和提高性能。除此之外,Vue.js 还支持同步刷新(sync)、立即刷新(pre)等刷新策略。

3.$onAction

用于订阅actions的调用,只要有actions被调用就会触发这个函数。

Test.$onAction((args) => {
  console.log(args);
});

返回值args主要包括after回调,args(actions传递的参数),name(触发的actions名字),onError(错误回调),store(store实例)等。如下图
Vue——状态管理库Pinia

八、pinia插件

pinia 和 vuex 都有一个通病 页面刷新状态会丢失

我们可以写一个pinia 插件缓存他的值
参考博客:满哥牛文章来源地址https://www.toymoban.com/news/detail-466063.html

到了这里,关于Vue——状态管理库Pinia的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3学习-Pinia状态管理

    定义一个Store 这个 name ,也称为 id ,是必要的,Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use… 是跨可组合项的约定,以使其符合你的使用习惯。 使用 store 一旦 store 被实例化,你就可以直接在 store 上访问 state 、 getters 和 actions 中定义的任何属性 store 是一

    2024年02月14日
    浏览(39)
  • Vue | Vue.js 全家桶 Pinia状态管理

    🖥️ Vue .js专栏:Node.js Vue.js 全家桶 Pinia状态管理 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、Pinia和Vuex的对比 什么是Pinia呢? Pina和

    2024年01月16日
    浏览(50)
  • Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么

    知识专栏 专栏链接 Vuex知识专栏 https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482 Vuex官方文档 https://vuex.vuejs.org/zh/ Pinia官方文档 https://pinia.web3doc.top/ 最近在 前端的深入学习过程 中,接触了与 状态管理 相关的内容,涉及到 与vue2适配的vuex 和 与vue3适配的pinia ,因此

    2024年02月03日
    浏览(50)
  • vue3 快速入门系列 —— 状态管理 pinia

    其他章节请看: vue3 快速入门 系列 vue3 状态管理这里选择 pinia。 虽然 vuex4 已支持 Vue 3 的 Composition API,但是 vue3 官网推荐新的应用使用 pinia —— vue3 pinia redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。 Pinia 符合直觉 的 Vue.js 状态管理库 甚至让你忘

    2024年04月26日
    浏览(35)
  • vue:状态管理库及其部分原理(Vuex、Pinia)

    多组件的状态共享问题: 当多个组件需要访问和修改相同的数据时,我们需要在组件之间传递 props或者使用事件总线。当,应用就会变得难以维护和调试。 多组件状态同步问题: 当一个组件修改了状态,其他组件可能无法立即得知该变化。 状态变更的追踪问题: 无法追踪

    2024年01月19日
    浏览(48)
  • vue 全局状态管理(简单的store模式、使用Pinia)

    多个组件可能会依赖同一个状态时,我们有必要抽取出组件内的共同状态集中统一管理,存放在一个全局单例中,这样任何位置上的组件都可以访问其中的状态或触发动作 通过自定义一个store模式实现全局的状态管理,实例如下 有两个组件a、b共享store和store2两个状态,我们

    2024年02月13日
    浏览(50)
  • 深入 Pinia:从代码出发探索 Vue 状态管理的奥秘

    🍍 项目地址:https://github.com/mk965/read-pinia 🧑🏼‍💻 本节代码:https://github.com/mk965/read-pinia/tree/article_1 🚗源码地址: github.com/vuejs/pinia 📦打包文件: rollup.config.js 🚪入口文件: packages/pinia/src/index.ts 将 pinia/packages/pinia/src 目录下的所有文件复制到我们之前生成项目的 /src

    2023年04月25日
    浏览(92)
  • vue 3 第三十一章:状态管理(Pinia基础知识)

    状态管理是现代 Web 应用开发中的一个重要概念。Vue 3 中的状态管理库 Pinia ,是一个基于 Vue 3 Composition API 的状态管理库,它提供了一种 简单 、 灵活 的方式来管理应用程序的状态,同时还具有 高性能 和 可扩展性 。 Pinia 在某种程度上来说,也可以被叫做 Vuex5 ,因为它结合

    2024年02月07日
    浏览(90)
  • Vue3状态管理库Pinia——自定义持久化插件

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月13日
    浏览(34)
  • vue2(Vuex)、vue3(Pinia)、react(Redux)状态管理

    Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它使用集中式存储管理应用的所有组件的状态,以及规则保证状态只能按照规定的方式进行修改。 State(状态) :Vuex 使用单一状态树,即一个对象包含全部的应用层级状态。这个状态树对应着一个应用中的所有状态。 Gett

    2024年01月23日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包