Vue状态管理库-Pinia

一、Pinia是什么?

Pinia 是 Vue 的专属状态管理库,它允许支持跨组件或页面共享状态,即共享数据,他的初始设计目的是设计一个支持组合式API的 Vue 状态管理库(因为vue3一个很大的改变就是组合式API),当然这并不是说Pinia只支持vue3,他是同时支持vue2和vue3的,本文倾向于拥抱Vue3,所以代码语法都是倾向用组合式api的写法

二、在vue3中使用Pinia

下面的流程和相关代码均基于vue3项目

1、安装pinia

npm install pinia

或用yarn安装

yarn add pinia

package.json中看到pinia表示安装成功 

2、创建pinia实例并将其传递给应用

//src/main.js//创建应用实例
import { createApp } from "vue";
import App from "./App.vue";
let app = createApp(App);//pinia实例
import { createPinia } from "pinia";
let pinia = createPinia();
app.use(pinia);app.mount("#app");

挂载完成后,我们就可以在Vue的devtools里看到Pinia了

3、定义Store

Store 是用 defineStore() 定义的,它的第一个参数要求是一个独一无二的名字,在整个应用中保持唯一, 返回的函数命名为 use... 是一个符合组合式函数风格的约定

import { defineStore } from "pinia";//命名规则,建议以 `use` 开头且以 `Store` 结尾,即 use~~~Store
export const useMapStore = () => {// 其他配置...
}

Setup store(Option Store可以查看官方,本文不列举)

import { defineStore } from "pinia";
import { reactive, computed } from "vue";
import type { City, Province } from "@/interface/common";export const useMapStore = defineStore("mapStore", () => {//statelet cityList = reactive<Array<City>>([]);let provinceList = reactive([]);//getterconst simpleCityList = computed(() => {return cityList.filter((item) => item.code != "110000");});//actionsfunction changeCityList(list: City[]) {console.log("修改城市列表数据的事件被触发");cityList = Object.assign(cityList, list);}function changeProviceList(list: Province[]) {console.log("修改省份列表数据的事件被触发");provinceList = Object.assign(provinceList, list);}return {cityList,provinceList,simpleCityList,changeCityList,changeProviceList,};
});

 

4、使用store

<template><div>您好!欢迎来到星野的小世界</div><div>星野的目标是走遍中国的每一个省,中国的省如下:</div><div><ul><li v-for="city in cityList" :key="city.code">{{ city.name }}</li></ul></div>
</template><script setup lang='ts' name='Login'>
import { onMounted} from 'vue';
import { storeToRefs } from 'pinia';
import { getCityList } from "@/utils/common";
import { useMapStore } from '@/stores/map'let mapStore = useMapStore()
let { cityList } = storeToRefs(mapStore) //为了从 store 中提取属性时保持其响应性,需要使用 storeToRefs()。它将为每一个响应式属性创建引用onMounted(async () => {let list = await getCityList()mapStore.changeCityList(list) //修改store里的属性数据
})
</script>
<style lang='scss' scoped></style>

getCityList是一个工具函数,调用一个免费api获取中国的城市数据 

在 Setup Store 中:

  • ref() /reactive ( ) 就是 state 属性
  • computed() 就是 getters
  • function() 就是 actions

页面效果

5、修改store中的state

例如store中的state有一个城市统计属性: cityCount

在业务组件里,就可以通过mapStore.cityCount 直接修改数量

 

如果state有很多属性,还可以调用 $patch 方法。它允许你用一个 state 的补丁对象在同一时间更改多个属性

 mapStore.$patch({cityCount: mapStore.cityCount + 1,provinceCount: mapStore.provinceCount + 1})

好啦,Pinia 满足基础使用的读写改操作已经描述完毕,关于搭配 Nuxt 的 Pinia 完成SSR,后续会单独出文,敬请期待!😁

ps: 学习成长过程的简单记录,如有不恰当之处,欢迎交流

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

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

相关文章

PFA三角烧瓶实验室PFA锥形瓶本底纯净耐腐蚀性强

PFA三角烧瓶外观呈平底圆锥状&#xff0c;下阔上狭&#xff0c;有一圆柱形颈部&#xff0c;上方有一较颈部阔的开口&#xff0c;可用塞子封闭。PFA三角烧瓶也称PFA锥形瓶&#xff0c;PFA反应瓶&#xff0c;PFA三角烧瓶、PFA依氏烧瓶、PFA锥形烧瓶&#xff0c;PFA鄂伦麦尔瓶等。…

普中51单片机学习(串口通信)

串口通信 原理 计算机通信是将计算机技术和通信技术的相结合&#xff0c;完成计算机与外部设备或计算机与计算机之间的信息交换 。可以分为两大类&#xff1a;并行通信与串行通信。并行通信通常是将数据字节的各位用多条数据线同时进行传送 。控制简单、传输速度快&#xff1…

【大模型】finetune 百川2

使用官网例子finetune百川2&#xff0c;微调脚本如下 模型为baichuan_chat_13B_v1 export CUDA_VISIBLE_DEVICES1 hostfile"" deepspeed --hostfile$hostfile baichuan_fineturn/fine-tune/fine-tune.py \--report_to "none" \--data_path "baichu…

2.22号qt

1.使用信号和槽实现多个界面跳转 1.1准备两个界面 1.2第一个界面准备signal 1.3第二个界面准备slot 1.4将第一个界面的信号和槽进行连接 2.qss登录界面升级优化 2.1概念 Qss是Qt程序界面中用来设置控件的背景图片、大小、字体颜色、字体类型、按钮状态变化等属性&#xff…

【Python】Python实现串口通信(Python+Stm32)

&#x1f389;欢迎来到Python专栏~Python实现串口通信 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望…

springboot208基于springboot物流管理系统

基于spring boot物流管理系统设计与实现 摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。…

jax可微分编程的笔记

jax可微分编程的笔记 1.1.1 求导的基本概念 所谓的导数是一个从集合F到自身的映射. 有时,我们也将一个从函数到函数的映射称为一个操作, 这里的操作在物理学中也被称作一个算符. 但在计算机中的操作符相当于数学中的一个函数,而非从 函数到函数的映射. 应该指出的是,如果我们…

vue小记——this(2)

在Vue的方法中使用普通函数作为回调函数&#xff0c;那么在该回调函数中&#xff0c;this将不会指向Vue实例&#xff0c;而是指向全局对象&#xff08;在浏览器中是window&#xff09;。 错误 &#xff1a; export default { data() { return { message: Hello Vue! }; …

npm 包发布

name publish必填项&#xff08;version,nameverson构成唯一标识&#xff09;&#xff0c;唯一&#xff0c;所以publish前验证库里是否存在该名称&#xff0c;方式npm info xxx npm ERR! 404 cy_test is not in the npm registry.可以使用。规则&#xff1a;不能以.或者_开头…

maven工程打包引入本地jar包

1、通过maven生成本地区仓库包 mvn install:install-file --settings D:\lkx\download\apache-maven-3.6.3\conf\settings.xml -Dfileaspose-cad-21.8.jar -DartifactIdaspose-cad -DgroupIdsystem.core -Dversion21.8 -Dpackagingjar -DgeneratePomtrue # --settings&#xf…

进程线程间的通信:2024/2/22

作业1&#xff1a;代码实现线程互斥机制 代码&#xff1a; #include <myhead.h>//临界资源 int num10;//创建一个互斥锁 pthread_mutex_t mutex;//任务一 void *task1(void *arg) {//获取锁资源pthread_mutex_lock(&mutex);num123;sleep(3);printf("task1:num…

PacketSender-用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序

PacketSender-用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序 PacketSender是一款开源的用于发送/接收 TCP、UDP、SSL、HTTP 的网络实用程序&#xff0c;作者为dannagle。 其官网地址为&#xff1a;https://packetsender.com/&#xff0c;Github源代码地址&#xff1a;htt…

【AI绘画工具分别有哪些?】

目前有许多AI绘画工具可供选择&#xff0c;以下列举了一些常见的AI绘画工具&#xff1a; 1. DeepArt.io&#xff1a;该工具使用深度学习算法生成艺术风格的图像&#xff0c;并可以将输入图像与指定的艺术风格进行合并。 2. Prisma&#xff1a;这是一款非常流行的AI绘画应用&a…

SQL Server —— While语句循环

一&#xff1a;简介 while 循环是有条件的循环控制语句。满足条件后&#xff0c;再执行循环体中的SQL语句。 while: break, 如果有多条语句可以在while后面添加begin-end。关于while的语法 while(条件) -- begin -- 语句1 -- 语句2 -- break 根据情况是否添加break -- end 二…

leetcode日记(32)字符串相乘

做了很久很久……真的太繁琐了&#xff01;&#xff01; class Solution { public:string multiply(string num1, string num2) {string s;string str;if (num1 "0" || num2 "0") return "0";for(int inum2.size()-1;i>0;i--){int c2num2[…

Open CASCADE学习|全局属性

目录 1、概念解释 质心&#xff1a; 重心&#xff1a; 惯性矩&#xff1a; 惯性矩阵&#xff1a; 主惯性矩&#xff1a; 静态惯性矩&#xff1a; 2、API 1、概念解释 质心&#xff1a; 质心是质量中心的简称&#xff0c;指物质系统上被认为质量集中于此的一个假想点。…

Qt:tabWidget控件

一、tabWidget用来做什么 tabWidget控件用来进行不同控件页面的跳转&#xff0c; 二、控件的一些函数功能 添加一个页面&#xff0c;返回index int addTab(QWidget *widget, const QString &); int addTab(QWidget *widget, const QIcon& icon, const QString &…

pytest教程-11-初识fixture

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节我们学习了使用allure生成html测试报告的方法&#xff0c;本小节我们讲解一下pytest fixture测试夹具的使用方法。 前言 在做自动化的过程中&#xff0c;编写用例时候需要用到用例的前置和用例的后置&a…

2024年了,抖店还能做吗?适合新手吗?

我是电商珠珠 现在已经24年了&#xff0c;抖店也已经发展了四年了。其中有很多在门外观望的人&#xff0c;还在犹豫不决。认为抖店发展到今天&#xff0c;所有的红利早已在20年的时候就消失殆尽了&#xff0c;特别是没有经验的如果入驻了&#xff0c;既不能享受平台红利&#…

后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化 有时候我们会遇到这样的问题&#xff0c;有两个css对一个class声明了样式&#xff0c;这样的话后引入的css会覆盖前面的css样式&#xff0c;导致样式冲突&#xff0c;那么我们怎么解决这种问题呢&#xff0c;我们可以使用样式的模块化&#xff0c;我们起名一个inde…