vue3 使用pinia -- vue2 vuex的plus版

接入状态store 即 vuex

呃(⊙﹏⊙)vuex这里可以略过了,我在研究完后,才发现vue3出来个pinia,是vuex的升级,体积更小更省事,我不删这里了,单纯记录下🙂 --pinia用法下面有写哦

① 执行 npm install vuex@next
② 在src下创建store文件夹,再创建index.js文件,文件基础内容如下:

import { createStore } from 'vuex'export default createStore({state: {count:1},getters: {},mutations: {incrementCount(state, data) {state.count= data}},actions: {},modules: {}
})

③ 在main.js引入

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 重点1
const app = createApp(App);
app.use(store); // 重点2
app.mount('#app');

到这里就store就引入完成了
接下来就浅说下获取值设置值,嘻嘻嘻
获取:

import { useStore } from 'vuex'
const store = useStore()
const getCount = computed(() => store.state.count)
console.log('此时打印:'+ getCount.value) //此时打印:1

设置–这里要分为两种情况
① 在vue页面

import { computed} from 'vue'
import { useStore } from 'vuex'
const store = useStore()
store.commit('incrementCount', '2')
const getCount = computed(() => store.state.count)
console.log('此时打印:'+ getCount.value) // 此时打印:2

② 在js页面(js页面是获取不到vuex的,所以只要按照文件路径正常引入进入)

import store from '@/store/index' // 引入
import { computed} from 'vue'// 将方法暴漏出去
export function setCount() {store.commit('incrementCount', '3')const getCount = computed(() => store.state.count)console.log('此时打印:'+ getCount.value) // 此时打印:3
}

到这里store就全部讲完啦-------------------------------------------------------------------------------------------------

接入pinia (vuex的plus版👍)

① 执行:npm install pinia
② 新建store文件夹,在该文件夹下建立index.js文件

// index.js
//使用pinia来管理全局状态
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

③ main.js引用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//引入pinia状态管理
import pinia from './store'
createApp(App).use(pinia).mount('#app')

④ 在store文件夹下新建modules文件夹,在该文件夹下创建一个userStore.js文件夹,当然文件名也可自定义

//使用pinia来管理全局状态
import { defineStore } from "pinia"/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,
第二个是 getters,
第三个是 actions。
*/
//声明了一个useUserStore方法
const useUserStore = defineStore('user', {//准备state——用于存储数据state: () => {return {count: 0}},getters: {},//准备actions——用于响应组件中的动作和用于操作数据(state),pinia中只有state、getter、action,抛弃了Vuex中的Mutationactions: {increment() {console.log("我来到actions方法里面了")this.count++return this.count}}
})export default useUserStore

⑤ 接下来就是使用了

// HelloWorld.vue
<template><div>{{store.count}}</div><button type="primary" @click="store.increment()">count自增</button>
</template>
<script setup>
import useUserStore from "@/store/modules/userStore.js"
//引入全局状态
const store = useUserStore()
</script>

此时看下页面,点击按钮count值应该就可以变更了,好了爬了一个坑,继续往下走

pinia-plugin-persist缓存

这个功能是对pinia进行缓存,是vue2没有的,相当高级呀,解决了痛点

① 运行: npm install pinia-plugin-persist
store文件夹下的index.js文件增加

//使用pinia来管理全局状态
import { createPinia } from 'pinia'
//使用persist该插件将pinia里面的state里面的属性进行缓存到localStorage或者sessionStorage里面
import piniaPluginPersist from 'pinia-plugin-persist'  // 重点1
const pinia = createPinia()
//将persist插件放到pinia里面
pinia.use(piniaPluginPersist) // 重点2
export default pinia

③ 在modules下的js文件增加

//使用pinia来管理全局状态
import { defineStore } from "pinia"/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,
第二个是 getters,
第三个是 actions。
*/
//声明了一个useUserStore方法
const useUserStore = defineStore('user', {//准备state——用于存储数据state: () => {return {count: 0,msg:'hello',}},//使用persist插件对state里面属性进行缓存persist: {enabled: true,//开启缓存,默认缓存所有state里面的属性,默认key为defineStore里面的id值,这里id值为user,所以默认key为user//自定义持久化参数,指定以下state里面的属性进行缓存,未指定的不进行缓存,如果该store需要全部缓存,strategies就不需要设置了strategies: [{// 自定义keykey: 'count',// 自定义存储方式,默认sessionStoragestorage: sessionStorage,// 指定要持久化的数据paths: ['count']}]},getters: {},//准备actions——用于响应组件中的动作和用于操作数据(state),pinia中只有state、getter、action,抛弃了Vuex中的Mutationactions: {increment() {console.log("我来到actions方法里面了")this.count++return this.count}}
})
export default useUserStore

又是涨知识的一天(๑•̀ㅂ•́)و✧

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

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

相关文章

C# 实现格式化文本导入到Excel

目录 需求 Excel 的文本文件导入功能 范例运行环境 配置Office DCOM 实现 组件库引入 OpenTextToExcelFile 代码 调用 小结 需求 在一些导入功能里&#xff0c;甲方经常会给我们一些格式化的文本&#xff0c;类似 CSV 那样的纯文本。比如有关质量监督的标准文件&…

LangChain 入门6 magic不同格式文件的读取

概述&#xff1a; 除了原始文本数据&#xff0c;可能还希望从其他文件类型&#xff08;如PowerPoint演示文稿或PDF&#xff09;中提取信息。 可以使用LangChain文档加载程序将文件解析为可以输入LLM的文本格式。 基于MIME类型的解析 数据加载 import requestsresponse req…

如何理解和实现二分查找:一篇完整的解析

二分查找的基本思想 二分查找的核心思想是比较数组的中间元素与目标值。根据比较结果&#xff0c;可以排除一半的搜索空间。具体步骤如下&#xff1a; 初始化指针&#xff1a;设置两个指针&#xff0c;left 指向数组的开始位置&#xff0c;right 指向数组的结束位置。 循环搜索…

手写线程池|C语言版(二)|定义线程池的结构、创建线程池实例

文章目录 定义线程池结构任务结构体定义线程池结构体 组织头文件创建线程池实例函数原型定义线程池创建函数实现初始化线程池结构体指针初始化线程池结构体的各类参数 定义线程池的结构C代码创建线程池总体C代码 本文中&#xff0c;我们将创建线程池的结构体&#xff0c;该结构…

TCP/IP和HTTP协议

TCP/IP OSI 七层模型在提出时的出发点是基于标准化的考虑&#xff0c;而没有考虑到具体的市场需求&#xff0c;使得该模型结构复杂&#xff0c;部分功能冗余&#xff0c;因而完全实现 OSI 参考模型的系统不多。而 TCP/IP 参考模型直接面向市场需求&#xff0c;实现起来也比较…

一文掌握:Clipboard API ,让前端顺畅操作剪贴板,无论怎么复制,都显示你网站信息。

一、Clipboard API是什么 Clipboard API 是一个 Web API&#xff0c;它提供了一种在网页上读取和写入剪贴板内容的方式。通过 Clipboard API&#xff0c;网页可以访问用户的剪贴板&#xff0c;从中读取文本、图像或其他数据&#xff0c;并且可以将数据写入剪贴板&#xff0c;以…

FFmpeg基础知识详解:音频视频处理的强大工具

FFmpeg&#xff0c;这个强大的开源多媒体框架&#xff0c;已经成为全球范围内音频、视频处理和流媒体传输领域的基石。它集合了音频解码、编码、转码、混合、抓取、流化等多种功能于一身&#xff0c;几乎能满足任何与音视频处理相关的技术需求。本文将带你走进FFmpeg&#xff0…

2024五一杯C题思路代码文章成品分享:煤矿深部开采冲击地压危险预测

提供的数据分为五类&#xff1a; A:正常工作数据 B:前兆特征数据 C:干扰信号数据 D:传感器断线数据 E:工作面休息数据 任务细节&#xff1a; 任务1&#xff1a; 分析含干扰的电磁辐射和声发射信号&#xff0c;识别干扰信号的特征&#xff0c;并利用这些特征在特定时间段…

安装Kuboard管理k8s

一、Kuboard 介绍 Kuboard 是一款免费的 Kubernetes 管理工具,提供了丰富的功能,结合已有或新建的代码仓库、镜像仓库、CI/CD工具等,可以便捷的搭建一个生产可用的 Kubernetes 容器云平台,轻松管理和运行云原生应用。您也可以直接将 Kuboard 安装到现有的 Kubernetes 集群…

计算机毕业设计python_django宠物领养系统z6rfy

本宠物领养系统主要包括两大功能模块&#xff0c;即管理员模块、用户模块。下面将对这两个大功能进行具体功能需求分析。 &#xff08;1&#xff09;管理员&#xff1a;管理员登录后主要功能包括个人中心、用户管理、送养宠物管理、地区类型管理、失信黑名单管理、申请领养管理…

深入解析Jackson的ObjectMapper:核心功能与方法指南

com.fasterxml.jackson.databind.ObjectMapper 是Jackson库的核心类&#xff0c;负责JSON序列化与反序列化的重任。本文旨在详细介绍其成员属性和方法&#xff0c;帮助开发者更好地利用Jackson进行Java对象与JSON数据之间的转换操作。 初始化与配置 构造与复制 默认构造函数…

封装umi-request时通过 AbortController 配置取消请求

一、关键部分 一、在封装的request.ts中 声明一个 abortControllers 对象用于存储要取消的请求&#xff08;我用了-s表示复数&#xff0c;多个abortcontroller对象&#xff0c;与下面&#x1f447;的单个abortController区分&#xff09;封装取消请求的函数cancelRequest, 传入…

038——基于STM32和I.MX6uLL实现uart控制GPS(失败者总结)

目录 1、GPS模块简介 2、GPS数据格式 3、方案梳理 1、GPS模块简介 全球定位系统(Global Positioning System&#xff0c; GPS)是一种以空中卫星为基础的高精度无线电导航的定位系统&#xff0c;它在全球任何地方以及近地空间都能够提供准确的地理位置、车行速度及精确的时间…

邦注科技 温控箱对企业的重要性

注塑加工是将加热的熔融塑料注入模具中形成所需产品的工艺过程。良好的注塑加工工艺需要控制好许多参数&#xff0c;其中最重要的因素之一就是模具的温度。模具温度的不稳定会导致产品尺寸大小、表面缺陷等方面的问题&#xff0c;甚至会导致生产不良品&#xff0c;加大生产成本…

【webrtc】MessageHandler 5: 基于线程的消息处理:以PeerConnection信令线程为例

peerconn的信令是通过post 消息到自己的信令线程消息来处理的PeerConnectionMessageHandler 是具体的处理器G:\CDN\rtcCli\m98\src\pc\peer_connection_message_handler.hMachinery for handling messages posted to oneself PeerConnectionMessageHandler 明确服务于 signalin…

2021江苏省赛 H-Reverse the String

来源 题目 There is a string of lowercase letters, and you want to minimize its lexicographical order. What you can do is reverse an interval or do nothing. For example, for the string abcdefg, if we reverse the interval abcdefg, it will become abfedcg. A …

017、Python+fastapi,第一个Python项目走向第17步:ubuntu24.04 无界面服务器版下安装nvidia显卡驱动

一、说明 新的ubuntu24.04正式版发布了&#xff0c;前段时间玩了下桌面版&#xff0c;感觉还行&#xff0c;先安装一个服务器无界面版本吧 安装时有一个openssh选择安装&#xff0c;要不然就不能ssh远程&#xff0c;我就是没选&#xff0c;后来重新安装ssh。 另外一个就是安…

数据仓库和数据仓库分层

一、数据仓库概念 数据仓库(Data Warehouse)&#xff0c;可简写为DW或DWH。数据仓库&#xff0c;是为企业所有级别的决策制定过程&#xff0c;提供所有类型数据支持的战略集合。它是单个数据存储&#xff0c;出于分析性报告和决策支持目的而创建。 为需要业务智能的企业&#…

CGAL 点云数据生成DSM、DTM、等高线和数据分类

原文链接 CGAL 点云数据生成DSM、DTM、等高线和数据分类 - 知乎 在GIS应用软件中使用的许多传感器(如激光雷达)都会产生密集的点云。这类应用软件通常利用更高级的数据结构&#xff1a;如&#xff1a;不规则三角格网 (TIN)是生成数字高程模型 (DEM) 的基础&#xff0c;也可以利…

2024深圳杯数学建模竞赛A题(东三省数学建模竞赛A题):建立火箭残骸音爆多源定位模型

更新完整代码和成品完整论文 《2024深圳杯&东三省数学建模思路代码成品论文》↓↓↓&#xff08;浏览器打开&#xff09; https://www.yuque.com/u42168770/qv6z0d/zx70edxvbv7rheu7?singleDoc# 2024深圳杯数学建模竞赛A题&#xff08;东三省数学建模竞赛A题&#xff0…