vue3+vite+js 使用pinia -- vue2 vuex的plus版

先交代下基础版本:
“node”:“V16.14.1” “vue”: “^3.4.21” “vite”: “^5.2.0”

接入状态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>

版本:“pinia”: “^2.1.7”

此时看下页面,点击按钮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

版本:“pinia-plugin-persist”: “^1.0.0”

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

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

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

相关文章

JavaScript 数组方法详解

JavaScript数组方法详解 在JavaScript中&#xff0c;数组&#xff08;Array&#xff09;是一种用于存储多个有序值的数据结构。为了方便开发者高效地操作数组&#xff0c;JavaScript提供了一系列内置的方法。本文将详细介绍这些常用的数组方法&#xff0c;帮助读者更好地理解和…

【算法刷题day47】Leetcode:198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

文章目录 Leetcode 198. 打家劫舍解题思路代码总结 Leetcode 213. 打家劫舍 II解题思路代码总结 Leetcode 337. 打家劫舍 III解题思路代码总结 草稿图网站 java的Deque Leetcode 198. 打家劫舍 题目&#xff1a;198. 打家劫舍 解析&#xff1a;代码随想录解析 解题思路 偷&am…

Python 正则表达式 re.findall()

Python re.findall 正文示例一示例二示例三 正文 调用方法&#xff1a; re.findall(pattern, string, flags0)用法说明&#xff1a; 扫描整个 字符串&#xff0c;找到所有满足匹配样式的字符&#xff0c;将它们集合在一起以列表形式返回。其中这个返回的列表包含空的结果(没有…

CSF(Cloth Simulation Filter)点云地面点滤波

CSF[Cloth Simulation Filter]点云地面点滤波 0.引言1.布料模拟2.修改布料模拟3.布料滤波4.CSF总体过程 0.引言 code 基本原理&#xff1a;原始点云被倒置过来&#xff0c;然后⼀块布从上⽅掉落到倒置的表⾯。通过分析布的节点与相应的LIDAR点之间的相互作⽤&#xff0c;可以确…

2024年华为OD机试真题-数的分解-(C++)-OD统一考试(C卷D卷)

题目描述: 给定一个正整数n,如果能够分解为m(m > 1)个连续正整数之和,请输出所有分解中,m最小的分解。 如果给定整数无法分解为连续正整数,则输出字符串"N"。 输入描述: 输入数据为一整数,范围为(1, 2^30] 输出描述: 比如输入为: 21 输出: 21=10+11 补…

C++中使用Multimap和Vector管理和展示数据

一&#xff1a; 在本文中&#xff0c;我们将探讨如何在C中使用vector和multimap容器来管理一个简单的员工数据系统。我们将创建一个员工类&#xff0c;随机生成员工数据&#xff0c;将员工分组&#xff0c;并展示各组员工的详细信息。此示例展示了C标准模板库&#xff08;STL&…

【中级软件设计师】上午题15-计算机网络

上午题15-计算机网络 1 网络设备2 协议簇3 TCP和UDP4 SMTP和POP35 ARP和RARP6 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;7 URL8 浏览器9 IP地址和子网划分10 IPv611 Windows命令12 路由器 1 网络设备 物理层设备&#xff1a;中继器、集线器&#xff0…

Mysql基础(五)外键约束

一 外键 激励&#xff1a; 每天进步一点点即可 ① 思考 1、在MySQL中,我们知道主键 PRIMARY KEY的主要作用是唯一区分表中的各个行 [记录];思考&#xff1a;但是对于外键 foreign key比较陌生? 那么外键作用以及限制条件和目的呢? ② 外键的定义 1、外键是某个表 A中…

图像处理之SVD检测显示屏缺陷(C++)

图像处理之SVD检测显示屏缺陷&#xff08;C&#xff09; 文章目录 图像处理之SVD检测显示屏缺陷&#xff08;C&#xff09;前言一、SVD算法简介二、代码实现总结 前言 显示屏缺陷检测是机器视觉领域的一处较广泛的应用场景&#xff0c;显示屏主要有LCD和OLED&#xff0c;缺陷类…

基于java,SpringBoot和Vue的智慧校园在线考试留言讨论系统设计

摘要 基于Java, SpringBoot和Vue的智慧校园在线考试留言讨论系统是一个为现代教育需求定制的Web应用&#xff0c;它结合了最新的前后端技术来提供一个互动性强、用户友好的学习和交流平台。该系统旨在通过提供实时留言和讨论功能&#xff0c;增进学生间的互动以及师生之间的沟…

算法打卡day44

今日任务&#xff1a; 1&#xff09;309.最佳买卖股票时机含冷冻期 2&#xff09;714.买卖股票的最佳时机含手续费 3&#xff09;复习day19 309.最佳买卖股票时机含冷冻期 题目链接&#xff1a;309. 买卖股票的最佳时机含冷冻期 - 力扣&#xff08;LeetCode&#xff09; 给定一…

快来看 2024年ICLR杰出论文奖揭晓啦 值得关注

会议之眼 快讯 在人工智能的浪潮中&#xff0c;国际学习表征会议&#xff08;ICLR&#xff09;无疑是引领学术前沿的重要会议之一&#xff01;ICLR是深度学习领域的顶级会议之一&#xff0c;由深度学习领域的两位巨头Yoshua Bengio和Yann LeCun于2013年创办。 2024年5月6日&a…

NSSCTF中的web

目录 [第五空间 2021]WebFTP [LitCTF 2023]PHP是世界上最好的语言&#xff01;&#xff01; [SWPUCTF 2021 新生赛]PseudoProtocols [LitCTF 2023]导弹迷踪 [NISACTF 2022]easyssrf [第五空间 2021]WebFTP 1.进入页面&#xff0c;发现是登录页面&#xff0c;想到 弱口令&…

反射技术介绍以及底层逻辑使用

反射概述&#xff1a; 1.反射是指对于任何一个Class类&#xff0c;在"运行的时候"都可以直接得到这个类全部成分。 2.在运行时,可以直接得到这个类的构造器对象&#xff1a;Constructor 3.在运行时,可以直接得到这个类的成员变量对象&#xff1a;Field 4.在运行时,可…

大模型微调之 在亚马逊AWS上实战LlaMA案例(六)

大模型微调之 在亚马逊AWS上实战LlaMA案例&#xff08;六&#xff09; 通过 SageMaker Python SDK 进行微调Llama2 可以使用 SageMaker Python SDK 微调 Llama 2 模型。以下是在数据集上微调 Llama 2 7B 的示例代码&#xff1a; import os import boto3 from sagemaker.sessi…

【RAG 博客】Small-to-Big Retrieval

Blog&#xff1a;Advanced RAG 01: Small-to-Big Retrieval ⭐⭐⭐⭐ Code&#xff1a;https://colab.research.google.com/github/sophiamyang/demos/blob/main/advanced_rag_small_to_big.ipynb Small-to-Big Retrieval 技术试图解决这样一个矛盾&#xff1a;更大的 chunk 可…

28 JavaScript学习: 代码规范

代码规范通常包括以下几个方面: 变量和函数的命名规则空格&#xff0c;缩进&#xff0c;注释的使用规则。其他常用规范…… 变量名 在编写JavaScript代码时&#xff0c;遵守良好的变量命名规范是非常重要的&#xff0c;这可以增加代码的可读性和可维护性。以下是一些常见的…

iOS ------ 内存五大分区

1&#xff0c;内存的概念&#xff1a; 虚拟内存&#xff08;Virtual Memory&#xff09;&#xff1a;虚拟内存是操作系统提供的一种机制&#xff0c;它使得应用程序能够访问超出物理内存限制的内存空间。虚拟内存将应用程序的内存地址空间分割成固定大小的页面&#xff08;Pag…

18.Docker学习

1.Docker应用场景 Docker借鉴了标准集装箱的概念。标准集装箱将货物运往世界各地&#xff0c;Docker&#xff08;模板&#xff09;将软件运往各个环境&#xff08;测试环境和生产环境拉取镜像&#xff08;实例&#xff09;&#xff09;&#xff0c;相当于是一个模子刻出来的 …

路由策略与路由控制

1.路由控制工具 匹配工具1&#xff1a;访问控制列表 &#xff08;1&#xff09;通配符 当进行IP地址匹配的时候&#xff0c;后面会跟着32位掩码位&#xff0c;这32位称为通配符。 通配符&#xff0c;也是点分十进制格式&#xff0c;换算成二进制后&#xff0c;“0”表示“匹配…