Pinia学习笔记 | 入门 - 映射辅助函数

文章目录

  • Pinia学习笔记
    • 简介
      • Pinia是什么
    • 代码分割机制案例
      • 1.挂载Pinia
        • Vue3
        • Vue2:安装`PiniaVuePlugin`插件
      • 2.定义store的两种方式options API 和 composition API
        • 使用options API模式定义
        • 使用composition API模式
      • 2.业务组件对store的使用
        • 创建store实例
        • 解构访问Pinia容器数据
        • 状态更新和Actions
        • getters使用
      • Pinia和VueDevtools
    • 映射辅助函数

Pinia学习笔记

参考文章1:上手 Vue 新的状态管理 Pinia,一篇文章就够了
参考文章2:
作者:南山种子外卖跑手
链接:https://juejin.cn/post/7089032094231298084
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

简介

Pinia是什么

Pinia是一个全新的Vue状态管理库,是Vuex的代替者(可以理解成Vuex5,Vuex不会再更新)。

Pinia和Vuex

VuexPinia
StateGettesMutations(同步)、Actions(异步)StateGettesActions(同步异步都支持)
Vuex4用于Vue3,Vuex3用于Vue2Vue2和Vue3都支持

Pinia的其他特点

  • 提供扁平结构,每个store都是互相独立的。所以pinia具有更好的代码分割且没有命名空间,也可以通过一个模块中导入另一个模块来隐式嵌套store。
  • Vue2 和 Vue3 都支持,除了初始化安装和SSR配置之外,两者使用上的API都是相同的
  • 支持Vue DevTools
  • 模块热更新
    • 无需重新加载页面就可以修改模块
    • 热更新的时候会保持任何现有状态
  • 支持使用插件扩展 Pinia 功能
  • 支持服务端渲染

mutation 已被弃用,初衷是带来 devtools 的集成方案

代码分割机制案例

某项目有3个store「user、job、pay」,另外有2个路由页面「首页、个人中心页」,首页用到job store,个人中心页用到了user store,分别用Pinia和Vuex对其状态管理。
在这里插入图片描述
先看Vuex的代码分割: 打包时,vuex会把3个store合并打包,当首页用到Vuex时,这个包会引入到首页一起打包,最后输出1个js chunk。这样的问题是,其实首页只需要其中1个store,但其他2个无关的store也被打包进来,造成资源浪费。

在这里插入图片描述

Pinia的代码分割: 打包时,Pinia会检查引用依赖,当首页用到job store,打包只会把用到的store和页面合并输出1个js chunk,其他2个store不耦合在其中。Pinia能做到这点,是因为它的设计就是store分离的,解决了项目的耦合问题。

1.挂载Pinia

安装pinia npm install pinia

Vue3

import { createApp } from 'vue'
import { createPinia } from 'pinia'; //引入createPinia 
import App from'./App.vue' //引入根组件const pinia = createPinia() //创建pinia实例
const app = creatApp(App) //创建Vue应用实例app.use(pinia)//安装pinia插件
app.mount('#app')

Vue2:安装PiniaVuePlugin插件

import { createPinia,PiniaVuePlugin } from 'pinia';Vue.use(PiniaVuePlugin)
const pinia = createPinia() //创建pinia实例
new Vue({router,store,render: h => h(App),pinia
}).$mount('#app')

2.定义store的两种方式options API 和 composition API

defineStore()方法

  • 第一个参数是表示store的唯一名称id,Pinia 会把所有的模块都挂载到根容器上
  • 第二个参数可接受两类值:Setup 函数或 Option 对象。
    • 第二个参数是Option对象 对应options API的写法
      • state返回初始状态的函数。必须是箭头函数,箭头函数有利于TS类型推导。必须是函数的原因是防止服务端渲染时交叉请求导致数据状态污染(客户端渲染没有任何区别)
      • getters 就是用来封装计算属性,类似于组件的computed,有缓存功能
      • actions就是用来封装业务逻辑,类似与组件的methods,修改 state
    • 第二个参数是Setup函数 对应composition API的写法
      • ref()state 属性,用于存储容器store里的数据
      • computed()getters
      • functionaction,修改 state
  • 返回值是一个函数,该函数调用后返回store容器实例

Pinia会把所有的容器挂在到根容器

使用options API模式定义

import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counterForOptions', {state: () => {return { count: 1 };},actions:{changeState(){ //通过this访问容器里的数据this.count++}}getters: {//参数state是状态数据,可选参数doubleCount(state) {return state.count * 2;}doubleCount1(state):number { //也可以使用this,但是类型推导存在问题,必须手动指定返回值类型return this.count * 2;}}
});

使用composition API模式

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counterForSetup', () => {const count = ref<number>(1);const doubleCount = computed(() => count.value * 2);function increment() {count.value++;}return { count, doubleCount, increment };
});

2.业务组件对store的使用

创建store实例

调用 defineStore()返回的函数时创建store实例,store实例是一个被reactive包装的对象

store实例示例
在这里插入图片描述

//组件内使用
<script setup>
//useCounterStore接收defineStore返回的函数
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
</script>

注意:组件外使用时,必须在函数内部

import { useAuthUserStore } from '@/stores/auth-user'router.beforeEach((to, from, next) => {//因为路由器是在其被安装之后开始导航的// 必须再函数内部使用,为确保 pinia 实例被激活const authUserStore = useCounterStore()if (authUserStore.loggedIn) next()else next('/login')
})

解构访问Pinia容器数据

直接解构后的count变量会失去响应式,成为一次性数据。

//组件中的代码
<script setup lang="ts">
import {useMainStore} from '../store'
const {count} = useMainStore()
</script><template><div>{{count }}</div>
</template>

解决办法:使用storeToRefs()方法,该方法的作用将解构出来的数据做ref响应式代理

storeToRefs()方法

  • 作用是创建一个引用方法。包含 store 的所有 state、 getter 和 plugin 添加的 state 属性,会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
  • 底层使用toReftoRefs实现的一个 api 方法
<script setup lang="ts">
import {useMainStore} from '../store'
import {storeToRefs} from 'pinia'
const {count} = storeToRefs(useMainStore())
/*ObjectRefImpl
{"_object": {"count": 1},"_key": "count","__v_isRef": true
}
*/
console.log(count)
console.log(count.value) //1
</script>

状态更新和Actions

store的$patch():批量更新state
- 参数可以是对象和函数(参数是state)

<script setup lang="ts">
import {useMainStore} from '../store'
import {storeToRefs} from 'pinia'
const mainStore = useMainStore()
const {count} = storeToRefs(useMainStore())
const changeCount = ()=>{//方式1:最简单的方式// mainStore.count++; //方式2:如果需要多个数据,建议使用$patch,批量更新//mainStore.$patch({//  count:mainStore.count+1,//...数据名:修改后的值//涉及数组很麻烦// })//方式3:$patch(函数)其中函数的参数是state就是store的state,批量更新//mainStore.$patch(state=>{//  state.count++//})//方法4:逻辑比较多的时候可以封装到actions做处理,mainStore.changeState()
}
</script>

也可以直接从store中结构action,因为action也被绑定在store上

<script setup lang="ts">
import {useMainStore} from '../store'
const mainStore = useMainStore()
const {changeState} = store
</script>

getters使用

//虽然使用了三次,但是只会调用一次,有缓存功能
<template><div><div>{{mainStore.count }}</div><p><button @click="changeCount">修改数据</button></p><p>{{mainStore.doubleCount}}</p><p>{{mainStore.doubleCount}}</p><p>{{mainStore.doubleCount}}</p></div>
</template>

Pinia和VueDevtools

在这里插入图片描述

在这里插入图片描述

映射辅助函数

  • mapStores()
  • mapState():将 state 属性映射为 只读的计算属性
  • mapWritableState()
  • mapActions()

1.不再使用 mapMutations。
2.Pinia为了兼容option api 提供的类似Vuex map 系列的映射辅助函数,不推荐使用。
3. mapGetters = mapState,mapGetters的底层实现逻辑和mapState一样

mapState():将 state 属性映射为 只读的计算属性
使用数组直接 同名映射:…mapState(store, [‘count’])
使用 对象 可映射为 新的名称:…mapState(store, { key: value, fn (state) })
使用对象时, value 值可以是 字符串,可以是 函数;
对象内部也可以直接定义 函数,接收 store 作为参数

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/21981.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Docker】快速入门,带你快速了解 Docker

文章底部有投票活动&#xff0c;赶快参与进来吧&#x1f603; 相信大家在开发过程中都听说过 Docker 一词&#xff0c;至于 Docker 在开发中扮演的角色&#xff0c;估计好多人都说不上来&#xff0c;今天就让阿Q带大家一起揭开它神秘的面纱&#xff01; 文章目录 什么是容器&a…

Ubuntu 的安装及其设置

文章目录 安装 Ubuntu屏幕分辨率设置修改软件源服务器锁屏时间设置设置 dash跨系统拖拽复制文件的设置 安装 Ubuntu 首先安装 VMware 虚拟机&#xff0c;虚拟机的安装比较简单&#xff0c;一步步点击Next即可完成安装。 安装完成后启动虚拟机&#xff0c;点击创建新的虚拟机。…

Spring @RequestMapping 工作原理

Spring RequestMapping 工作原理 配置基础启动类及Controller类 SpringBootApplication public class DemoServiceApplication {public static void main(String[] args) {SpringApplication.run(DemoServiceApplication.class, args);} }RestController public class HelloC…

yapi的部署和安装

安装Node.js环境 wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz 或者直接浏览器下载传输到服务器上。 https://nodejs.org/zh-cn/download/tar -xvf node-v14.15.4-linux-x64.tar.xz 太高版本不行&#xff0c;install会报错。16开头的。 配置环境…

FastAPI 初体验,效率杠杠滴

目录 前言&#xff1a; 1、官网信息 2、环境安装 3、写个demo 4、关注的几个技术点 4.1 路径参数数据接收 4.2 查询参数数据接收 4.3 post 数据接收 4.4 header数据接收 4.5 cookie数据接收 5、总结 5.1 没有使用门槛 5.2 开发效率 5.3 劣势 前言&#xff1a; 写…

Vue简单使用及整合elementui

创建vue工程 在vue工程目录下npm install vue 下载离线vue https://v2.vuejs.org/v2/guide/installation.html 引入工程中 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" c…

C# 参数传递(引用类型参数)

目录 一&#xff0c;引言 二&#xff0c;引用类型参数作为值参数传递 三&#xff0c;引用类型参数作为引用参数传递 一&#xff0c;引言 方法中参数的传递方式主要有值参数传递和引用参数传递&#xff08;ref&#xff0c;out&#xff09;&#xff0c;而参数有可以分为值类型…

构造稀疏矩阵例子

构造稀疏矩阵的目的是在处理具有大量零元素的大规模数据时&#xff0c;节省内存空间和计算资源&#xff0c;并提高计算效率。稀疏矩阵是一种特殊的矩阵&#xff0c;其中包含许多零元素和一些非零元素。 #include "pcl.h" #include "common.h" #include &qu…

设计模式——责任链模式

责任链模式 定义 使多个对象都有机会处理请求&#xff0c;从而避免了请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;知道有对象处理它为止。 优缺点 优点 能将请求和处理分开。请求者可以不用知道是谁处理的&a…

Java设计模式之结构型-代理模式(UML类图+案例分析)

目录 一、基础概念 二、UML类图 1、静态代理类图 2、动态代理类图 三、角色设计 四、案例分析 1、静态代理 2、JDK动态代理 3、Cglib动态代理 五、总结 一、基础概念 代理模式是一种结构型设计模式&#xff0c;它用一个代理对象来封装一个目标对象&#xff0c;通常…

Python+docx实现python对word文档的编辑

前言&#xff1a; 该模块可以通过python代码来对word文档进行大批量的编辑。docx它提供了一组功能丰富的函数和方法&#xff0c;用于创建、修改和读取Word文档。下面是docx模块中一些常用的函数和方法的介绍&#xff1a; 安装&#xff1a;pip install docx 一、准备一个word文档…

MYSQL执行一条SELECT语句的具体流程

昨天CSDN突然抽风 我一个ctrlz把整篇文章给撤掉了还不能复原 直接心态崩了不想写了 不过这部分果然还是很重要,还是写出来吧 流程图 这里面总共有两层结构Server层 储存引擎 Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现&#xff0c;主要包…