当前位置: 首页 > news >正文

vue 之 vuex

目录

vuex 是什么

Vuex管理哪些状态呢?

Vuex 页面刷新数据丢失怎么解决

1. 使用浏览器的本地存储

2. 使用 Vuex 持久化插件

3. 使用后端存储

注意事项

Vuex 为什么要分模块并且加命名空间


vuex 是什么

vuex 是专门为 vue 提供的全局状态管理系统,用于多个组件中数据共享、数据缓存等。(无法持久化、内部核心原理是通过创造一个全局实例 new Vue)

主要包括以下几个模块:

  • State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
  • Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  • Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
  • Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
  • Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

Vuex管理哪些状态呢?

一般大型项目中会有多个状态,在多个界面间的共享问题。

  • 比如用户的登录状态、用户名称、头像、地理位置信息等等。
  • 比如商品的收藏、购物车中的物品等等。

这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的。

Vuex 页面刷新数据丢失怎么解决

当 Vuex 中的数据在页面刷新后丢失时,这通常是因为 Vuex 的状态数据是保存在运行内存中的,页面刷新会导致 Vue 实例重新加载,进而 Vuex 中的数据被重置为初始状态。为了解决这个问题,可以采取以下几种方法:

1. 使用浏览器的本地存储
  • localStorage:数据会永久存储在浏览器中,除非被主动删除。
  • sessionStorage:数据存储在当前会话的 tab 页中,关闭当前 tab 页或浏览器窗口后数据会消失。
  • cookie:数据根据设置的有效时间存储,但通常不推荐用于存储大量数据,因为存在大小限制且不易读取。

解决方案:

在 Vuex 的 mutation 或 action 中,监听数据的变化,将数据同步到浏览器的本地存储中。
页面刷新时,从本地存储中读取数据并恢复到 Vuex 中。

2. 使用 Vuex 持久化插件

vuex-persistedstate:它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。

解决方案:

安装并引入vuex-persistedstate 插件
在创建 Vuex store 时,将插件添加到 plugins 数组中,并配置存储选项(如使用 localStorage 还是 sessionStorage)。

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';Vue.use(Vuex);export default new Vuex.Store({state: {// ...},mutations: {// ...},actions: {// ...},plugins: [createPersistedState({storage: window.sessionStorage, // 或者 localStorage})]
});
3. 使用后端存储

如果数据量较大或需要多个设备之间共享数据,可以考虑将数据存储到后端服务器中。

解决方案:

在 Vuex 的 action 中,使用 Ajax、Fetch API 等技术将数据发送到后端服务器进行存储。
页面刷新时,从后端服务器重新获取数据并恢复到 Vuex 中。

注意事项
  • 对于敏感信息(如用户登录信息),不应直接存储在浏览器的本地存储中,而应采用更安全的方式来保存。
  • 使用本地存储或插件时,要注意防止数据的被篡改或泄露等安全问题。
  • 根据应用的具体需求和场景,选择最适合的解决方案。例如,对于小型应用或数据量不大的情况,使用浏览器的本地存储可能是一个简单有效的选择;而对于大型应用或需要复杂数据管理的情况,使用后端存储可能更为合适。

Vuex 为什么要分模块并且加命名空间

模块: 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

命名空间:默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望使模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。这样,即使有多个模块,也不会造成状态全局污染的问题。

相关文章:

vue 之 vuex

目录 vuex 是什么 Vuex管理哪些状态呢? Vuex 页面刷新数据丢失怎么解决 1. 使用浏览器的本地存储 2. 使用 Vuex 持久化插件 3. 使用后端存储 注意事项 Vuex 为什么要分模块并且加命名空间 vuex 是什么 vuex 是专门为 vue 提供的全局状态管理系统&#xff0c…...

【代码随想录】【算法训练营】【第36天】[452]用最少数量的箭引爆气球 [435]无重叠区间 [763]划分字母区间

前言 思路及算法思维,指路 代码随想录。 题目来自 LeetCode。 day 36,周三,最难坚持的一天~ 题目详情 [452] 用最少数量的箭引爆气球 题目描述 452 用最少数量的箭引爆气球 解题思路 前提:区间可能重叠 思路:…...

【ElasticSearch】windows server 2019安装ES8.9.1 + kibana8.9.1 + IK分词器

目录 准备工作 ES Kibana IK 安装 es es访问测试 将es安装为系统服务 Kibana 配置es 运行kibana 访问测试 IK 补充 准备工作 ES8.9.1 kibana8.9.1 IK的版本最好要对应上!!! ES es8.9.1: https://artifa…...

前端面试题(一)答案版

面试形式:线下面试:时长60分钟 面试过程:填写个人信息->笔记题->HR根据前面2份资料提问->技术面试(见如下面试题) 面试官:项目负责人 公司背景:教育培训公司,项目给本公…...

qt c++ 子界面调用主窗口函数

方法&#xff1a;使用单例模式 将主窗口设计为单例模式。在子界面中通过单例访问主窗口实例&#xff0c;并调用公共函数。 // mainwindow.h #include <QMainWindow>class MainWindow : public QMainWindow {Q_OBJECTpublic:static MainWindow& instance() {static …...

Excel中多条件判断公式怎么写?

在Excel里&#xff0c;这种情况下的公式怎么写呢&#xff1f; 本题有两个判断条件&#xff0c;按照题设&#xff0c;用IF函数就可以了&#xff0c;这样查看公式时逻辑比较直观&#xff1a; IF(A2>80%, 4, IF(A2>30%, 8*(A2-30%),0)) 用IF函数写公式&#xff0c;特别是当…...

从申请到放款,外汇贷款软件的全流程测试解析

一、业务概述 外汇贷款是商业银行经营的一项重要资产业务。它是指银行运用外汇资金&#xff0c;向借款人提供短期或长期的外汇资金融通。这种贷款业务不仅能帮助银行获取经济效益&#xff0c;还是银行联系客户的主要途径。外汇贷款对于利用外资、引进先进技术设备&#xff0c;以…...

数据分析之数据预处理、分析建模、可视化

1、数据分析概述 数据分析&#xff1a;对大量有序或无序的数据进行信息的集中整合、运算提取、展示等操作&#xff0c;通过这些操作找出研究对象的内在规律。 目的&#xff1a;揭示事物运动、变化、发展的规律。 意义&#xff1a;提高系统运行效率、优化系统作业流程、预测未…...

计算机网络:1概述

概述 因特网 网络、互连网&#xff08;互联网&#xff09;与因特网的区别与关系 若干节点和链路互连形成网络&#xff0c;若干网络通过路由器互连形成互连网&#xff0c;世界上最大的互连网是互联网&#xff08;因特网Internet&#xff09;。 因特网发展的三个阶段 因特网…...

Mybatis工作流程和插件开发

在了解插件开发之前&#xff0c;我们先总体的来梳理一下Mybatis的大致执行流程&#xff1a; 1.new SqlSessionFactoryBuilder().build(inputStream):先根据配置文件&#xff08;包含了全局配置文件和映射配置文件&#xff09;初始化一个对象Configuration&#xff08;这里对象里…...

部署大模型LLM

在autodl上部署大模型 windows运行太麻烦&#xff0c;环境是最大问题。 选择云上服务器【西北B区 / 514机】 cpp (c c plus plus) 纯 C/C 实现&#xff0c;无需外部依赖。针对使用 ARM NEON、Accelerate 和 Metal 框架的 Apple 芯片进行了优化。支持适用于 x86 架构的 AVX、…...

【CT】LeetCode手撕—88. 合并两个有序数组

目录 题目1- 思路2- 实现⭐88. 合并两个有序数组——题解思路 2- ACM实现 题目 原题连接&#xff1a;88. 合并两个有序数组 1- 思路 模式识别 模式1&#xff1a;两个有序数组合并 ——> 双指针模式2&#xff1a;返回结果填充到 nums1[mn] ——> 需要开辟新的数组空间 …...

深入分析 Android BroadcastReceiver (二)

文章目录 深入分析 Android BroadcastReceiver (二)1. 深入理解 BroadcastReceiver 的高级使用和优化2. 有序广播&#xff08;Ordered Broadcasts&#xff09;2.1 实现有序广播 3. 粘性广播&#xff08;Sticky Broadcasts&#xff09;3.1 使用粘性广播 4. 本地广播&#xff08;…...

Linux常⽤服务器构建-ssh和scp

目录 1.ssh <1>ssh介绍 <2>安装ssh A.安装ssh服务器 B.远程登陆 <3>使⽤ssh连接服务器 2.scp 本地⽂件复制到远程&#xff1a; 本地⽬录复制到远程&#xff1a; 远程⽂件复制到本地&#xff1a; 远程⽬录复制到本地&#xff1a; 1.ssh <1>…...

《QT实用小工具·七十》openssl+qt开发的P2P文件加密传输工具

1、概述 源码放在文章末尾 该项目实现了P2P的文件加密传输功能&#xff0c;具体包含如下功能&#xff1a; 1、 多文件多线程传输 2、rsaaes文件传输加密 3、秘钥随机生成 4、断点续传 5、跨域传输引导服务器 项目界面如下所示&#xff1a; 接收界面 发送界面 RSA秘钥生成…...

短链接生成器排名前三!长链接转化成短链接工具有哪些?

在现今的网络营销环境中&#xff0c;短链接的应用越来越广泛。它不仅能简化长链接&#xff0c;提高分享效果&#xff0c;还能提升企业品牌形象和用户体验。于是&#xff0c;市场上涌现出众多短链接生成工具。本文将为您揭秘短链接生成器排名前三的产品&#xff0c;帮您找到最适…...

Vue50-mixin混入

一、为什么要使用 mixin混入 两个组件共享一个配置。 二、使用 mixin混入 2-1、创建一个混合js文件 2-2、引入混合js文件 1、局部混合 在每个组件中都引入混合js文件 注意&#xff1a; 混合就是复用配置&#xff0c;vm实例中的所有的配置项&#xff0c;都能在混合.js文件中写…...

Java创建线程的方式

继承Thread类 这是创建线程的基本方式之一。你需要创建一个新的类&#xff0c;该类继承自Thread类&#xff0c;并重写run()方法。然后&#xff0c;你可以创建这个类的一个实例并调用它的start()方法来启动新线程。 public class MyThread extends Thread { Override public vo…...

C# 程序结构

C# 程序结构 C#(读作“C-sharp”)是一种由微软开发的高级编程语言,它是.NET框架的一部分。C# 设计用于现代软件开发,具有强大的类型系统、丰富的库支持和面向对象的特性。本文将详细介绍C#程序的基本结构,包括其语法、类型系统、控制结构、类和对象等。 C# 程序的基本结…...

【Linux】使用 iptables 验证访问HDFS 所使用到的端口

目录 ​编辑 一、实操背景 二、iptables 简介 三、模拟操作 一、实操背景 背景&#xff1a; 在客户有外网的服务器需要访问内网大数据集群HDFS&#xff0c;使用iptable模拟测试需要开放的端口。 二、iptables 简介 具体介绍看文章&#xff1a; 【Linux】Iptables 详解与实战…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...