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

Vuex:深入理解所涉及的几个问题

你好,我是沐爸,欢迎点赞、收藏、评论和关注。

一、Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

二、Vuex 的原理

Vuex 的原理是通过集中管理应用的状态,并提供一套规则和方法来确保状态的变更是可预测、可追踪和可维护的。涉及以下几个关键概念:

  1. 集中式状态管理:Vuex 将所有组件的状态集中管理在一个全局的存储对象中。
  2. 响应式数据:Vuex 使用 Vue 的响应式系统,确保状态变更能够触发视图的更新。
  3. 状态变更的唯一方式:状态的变更只能通过提交 mutation 来完成,确保状态变更的可追踪和同步。
  4. 模块化:Vuex 允许将状态分割成模块,每个模块拥有自己的状态、mutationaction
  5. 异步处理action 用于处理异步操作,完成后通过 commit 提交 mutation 来变更状态。
  6. 热重载和时间旅行:Vuex 开发工具支持热重载和时间旅行调试,便于开发和调试。

三、为什么要使用 Vuex?

Vuex 提供了一种高效、可预测且可维护的方式来管理 Vue 应用的状态,尤其适用于大型或复杂应用。具有以下优势:

  1. 集中式管理状态:为 Vue 应用提供一个集中的地方来存储所有组件的状态。
  2. 解决组件通信问题:简化跨组件的状态共享和通信。
  3. 维护状态一致性:确保应用状态的一致性和可预测性。
  4. 提高开发效率:通过集中管理状态,提高开发和维护的效率。
  5. 增强可维护性:清晰的结构和规范使得代码更易于维护和扩展。
  6. 支持时间旅行调试:通过与 Vue Devtools 集成,支持时间旅行调试功能。
  7. 模块化:支持模块化管理状态,使得大型应用更易于组织。

四、Vuex 有哪几种属性?

  • state:用于存储全局的状态,类似于组件中的data。
  • getters:用于对state进行计算或过滤,类似于组件中的computed。
  • mutations:用于修改state的值,必须是同步操作。
  • actions:用于处理异步操作或批量的mutations操作,可以包含任意异步操作。
  • modules:用于将store分割成模块,每个模块都有自己的state、getters、mutations、actions。

五、Vuex 中 action 和 mutation 的区别?

  1. Mutation
    • mutation 用于直接变更 store 中的状态,必须是同步函数。
    • 它们是 Vuex 中修改状态的唯一方法,必须通过 commit 调用。
  2. Action
    • action提交的是 mutation,而不是直接变更状态。
    • action 可以包含任意异步操作。

六、为什么 Vuex 的 mutation 中不能做异步操作?

主要原因是为了确保状态的变更是可预测和同步的:

  1. 可预测性:同步操作使得状态变更的流程清晰且可预测,便于开发者理解和追踪状态变化,同时也方便调试。
  2. 同步性:异步操作可能导致状态在不同时间点被多次修改,这会使得状态变更的顺序变得复杂和难以控制。

七、Vuex 和单纯的全局对象有什么区别?

Vuex 是一个专为 Vue 应用设计的状态管理模式,提供了响应式、模块化、可追踪和可扩展(插件、调试工具)的状态管理机制,而单纯的全局对象则缺乏这些特性。

八、Vuex 的严格模式是什么?有什么作用?如何开启?

开启严格模式,仅需在创建 store 的时候传入 strict: true

const store = new Vuex.Store({// v3.xstrict: true
})const store = createStore({// v4.xstrict: true
})

在严格模式下,无论何时发生了状态变更,如果不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

注意,不要在发布环境下启用严格模式!因为严格模式会深度监测状态树来检测不合规的状态变更,会造成性能损失。

九、Vuex 刷新页面后数据就消失了,如何持久化保存数据?

Vuex3.x

1.使用浏览器的 localStoragesessionStorage 来保存状态。

(1)数据持久存储本地插件 localStoragePlugin.js

export default store => {store.subscribe((mutation, state) => {localStorage.setItem('vuexState', JSON.stringify(state))})
}

(2)定义仓库 store.js

import Vue from 'vue'
import Vuex from 'vuex'
import localStoragePlugin from './localStoragePlugin'Vue.use(Vuex)let storeObj = {count: 0
}const localData = localStorage.getItem('vuexState')
if (localData) {storeObj = JSON.parse(localData)
}export const store = new Vuex.Store({state: storeObj,getters: {doubleCount(state) {return state.count * 2}},mutations: {increment(state) {state.count++}},plugins: [localStoragePlugin]
})

(3)main.js 中注入仓库

import Vue from 'vue'
import App from './App.vue'
import { store } from './store'new Vue({render: (h) => h(App),store
}).$mount("#app")

(4)组件中使用仓库数据 HomePage.vue

<template><div><div>count - {{ count }}</div><div>doubleCount - {{ doubleCount }}</div><div><button @click="handleClick">Increment</button></div></div>
</template><script>
import { mapState, mapGetters } from 'vuex'
export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {handleClick() {this.$store.commit('increment')}}
}
</script>

2.使用 vuex-persistedstate 插件实现持久化数据存储。

安装插件

npm install vuex-persistedstate

使用插件

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})]
})

Vuex4.x

1.使用浏览器的 localStoragesessionStorage 来保存状态。

(1)数据持久存储本地插件 localStoragePlugin.js

export default store => {store.subscribe((mutation, state) => {localStorage.setItem('vuexState', JSON.stringify(state))})
}

(2)定义仓库 store.js

import { createStore } from 'vuex'
import localStoragePlugin from './localStoragePlugin'let storeObj = {count: 0
}const localData = localStorage.getItem('vuexState')
if (localData) {storeObj = JSON.parse(localData)
}export default createStore({state() {return storeObj},getters: {doubleCount(state) {return state.count * 2}},mutations: {increment(state) {state.count++}},plugins: [localStoragePlugin]
})

(3)main.js 中注入仓库

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'const app = createApp(App)
app.use(store)
app.mount('#app')

(4)组件中使用仓库数据 HomePage.vue

<template><div><div>count - {{ count }}</div><div>doubleCount - {{ doubleCount }}</div><div><button @click="handleClick">Increment</button></div></div>
</template><script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'const store = useStore()const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);function increment() {store.commit('increment')
}
</script>

2.使用 vuex-persistedstate 插件实现持久化数据存储。

安装插件

npm install vuex-persistedstate

使用插件

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'export default createStore({// ...state, mutations, actions等定义...plugins: [createPersistedState({storage: window.sessionStorage // 或者localStorage})]
})

注意,vuex-persistedstate 插件同时兼容 Vuex3.x 和 Vuex4.x。

十、Vuex 和 Pinia 的区别?

1.架构设计

  • Vuex 采用集中式设计,所有状态都存储在一个全局的状态树(Store)中。
  • Pinia 采用模块化设计,可构建多个Store,将状态分布在多个模块中。并允许打包工具对它们自动拆分。

2.代码风格和语法

  • Vuex 中更改 Store 中的状态的方法是提交mutations,mutations是同步的,用于实际修改状态。actions提交的是mutations,而不是直接变更状态,actions可以包含任意异步操作。
  • Pinia 更加简洁和灵活,它允许开发者直接修改状态,去除了mutations,actions相当于组件中的method,可以是同步或异步操作。

3.TypeScript支持

  • Vuex 需要通过额外的插件和配置来实现类型检查。
  • Pinia 提供了原生的 TypeScript 支持,在类型推导和类型检查上表现更佳。

4.适用场景

  • Vuex 更适用于大型、复杂的 Vue 项目。
  • Pinia 更时候小型或中等规模的 Vue 项目。

好了,分享结束,谢谢点赞,下期再见。

相关文章:

Vuex:深入理解所涉及的几个问题

你好&#xff0c;我是沐爸&#xff0c;欢迎点赞、收藏、评论和关注。 一、Vuex 是什么&#xff1f; Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 二、Vu…...

vue原理分析(六)研究new Vue()

今天我们来分析使用new Vue() 之前研究时&#xff0c;只是说是在创建一个实例。并没有深入进行研究 在vue的源码中找下Vue的构造函数 function Vue(options) {if (!(this instanceof Vue)) {warn$2(Vue is a constructor and should be called with the new keyword);}this.…...

滑动窗口+动态规划

前言&#xff1a;分析这个题目的时候&#xff0c;就知道要这两个线段要分开&#xff0c;但是要保证得到最优解&#xff0c;那么我们在选取第二根线段的时候&#xff0c;要保证我们第一根线段是左边最优解 并且我们选的两根线段的右端点一定是我们的数组的点&#xff08;贪心思…...

vscode配置django环境并创建django项目

1、创建文件夹 创建文件夹 并在vscode打开 终端输入命令 “ python -m venv env ” 查看目录结构 2、创建项目 在终端输入 django-admin startproject 文件名(这里以myshop为例) 3、创建应用 在myshop打开终端 在终端输入 django-admin startapp 应用名 这里以app1为例…...

WebGL系列教程四(绘制彩色三角形)

目录 1 前言2 varying变量介绍3 开始绘制3.1 声明顶点着色器3.2 声明片元着色器3.3 创建顶点和颜色的缓冲区3.4 指定变量从缓冲区获取值3.5 效果3.6 varying的内涵3.7 完整代码 4 总结 1 前言 上一篇中我们介绍了如何使用缓冲区来绘制三角形&#xff0c;这一篇我们来讲讲如何给…...

通过mxGraph在ARMxy边缘计算网关上实现工业物联网

在当今的工业4.0时代&#xff0c;工业物联网&#xff08;IIoT&#xff09;已经成为制造业转型升级的关键技术之一。ARMxy边缘计算网关作为工业自动化和物联网的重要组成部分&#xff0c;能够为工厂车间提供实时的数据处理能力和智能化服务。而mxGraph作为一种流行的JavaScript库…...

GEE案例:利用sentinel-1数据进行洪水监测分析(直方图统计)

目录 简介 数据 函数 ee.Filter.calendarRange(start, end, field) Arguments: Returns: Filter updateMask(mask) Arguments: Returns: Image 代码 结果 简介 利用sentinel-1数据进行洪水监测分析 数据 COPERNICUS/S1_GRD数据是由欧洲空间局(ESA)的Copernicus项…...

QT 联合opencv 易错点

https://blog.csdn.net/qq_51699436/article/details/135777911 网上已经有大量优秀切详尽的文章来讲述QT联合opencv了&#xff0c;我把容易出错的点列出来备忘 1、在进行opencv进行编译时&#xff0c;要确认好是32位还是64位&#xff0c;因为在创建QT项目的时候QT和opencv要匹…...

例如/举例的使用方法 ,e.g., 以及etc的使用方法

e.g. 例如 for example for the sake of example such as 1 e.g. 是拉丁语 exempli gratia 的缩写意思是“举个例子&#xff0c;比如”&#xff0c;等同于for example、 for the sake of example、such as&#xff0c;使用 e.g. 的目的是用几个例子来说明前面的观点。 2 例…...

20240902-VSCode-1.19.1-部署vcpkg-win10-22h2

20240902-VSCode-1.19.1-部署vcpkg-win10-22h2 软件环境 标签:C++ VSCode mingw gcc13 vcpkg cmake分栏:C++操作系统:Windows10 x64 22h2一、安装VScode-1.19.1 请参考另一篇文章《20240717-VSCode-1.91.1-部署gcc13-C++23-win10-22h2》。 二、安装cmake 本文流程需要安…...

MySQL学习(多表操作)

基本知识 一对多 创建部门表 – 主表 create table if not exists dept(deptno varchar(20) primary key ,name varchar(20) );创建员工表 – 创建外键约束 方式1constraint emp_fk foreign key(dept_id) references dept(deptno) create table if not exists emp(eid varc…...

鸿蒙开发(NEXT/API 12)【网络连接管理】 网络篇

简介 网络连接管理提供管理网络一些基础能力&#xff0c;包括WiFi/蜂窝/Ethernet等多网络连接优先级管理、网络质量评估、订阅默认/指定网络连接状态变化、查询网络连接信息、DNS解析等功能。 说明 为了保证应用的运行效率&#xff0c;大部分API调用都是异步的&#xff0c;对…...

VMware Fusion虚拟机Mac版 安装Ubuntu操作系统教程

Mac分享吧 文章目录 下载镜像地址&#xff1a;[www.macfxb.cn](http://www.macfxb.cn)一、CentOS安装完成&#xff0c;软件打开效果二、Mac中安装Ubuntu虚拟机1️⃣&#xff1a;下载镜像2️⃣&#xff1a;创建虚拟机3️⃣&#xff1a;虚拟机设置4️⃣&#xff1a;虚拟机安装5️…...

基于SpringBoot+Vue+MySQL的房屋租赁管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域的鸿沟&#xff0c;信息的…...

虚拟机器配置固定IP地址

新安装的虚拟机&#xff0c;如何配置固定的ip地址&#xff0c;废话少说直接上干货 第一步&#xff1a;在VMarea中 选中你要固定IP的虚拟机器&#xff0c;点击上面的“编辑”按钮&#xff0c;然后找到“虚拟网络编辑器”&#xff0c;选中你要修改的ip VMnet8&#xff0c;然后是…...

用python实现基于形态学的方法,如开运算和闭运算,来去除pcd格式激光点云中的植被

在Python中&#xff0c;你可以使用open3d库来读取和处理pcd格式的点云数据。下面是一个示例代码&#xff0c;展示如何使用形态学操作来去除植被。 首先&#xff0c;确保你已经安装了open3d库&#xff0c;可以使用以下命令进行安装&#xff1a; pip install open3d接下来&…...

QT 绘制简易时钟

原文件 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);this->startTimer(1000); }Widget::~Widget() {delete ui; }//时钟底座 void Widget::paintEvent(Q…...

为控制器的方法添加必要参数

前言&#xff1a;做这个系统时&#xff0c;要求每次调用接口时要传操作人、操作人电脑ip、菜单id&#xff0c;然后计入log。本来前端读取到然后加入请求头&#xff0c;后端写入log即可。但是老大要求后端也要把控必传参数&#xff0c;避免前端忘记。所以就写了这个。IOperation…...

(计算机网络)应用层

1.为什么需要应用层 应用层提供使用tcp&#xff0c;udp使用的方式 协议就是制定的规则 2.域名服务器概述 域名是唯一的 新增域名&#xff0c;大家都要修改这个文本文件&#xff0c;所以要进行集中管理这个文本文件&#xff0c;而不是使用本地的hosts文件 hosts文件在Windows系统…...

使用3DUNet训练自己的数据集(pytorch)— 医疗影像分割

代码:lee-zq/3DUNet-Pytorch: 3DUNet implemented with pytorch (github.com) 文章<cicek16miccai.pdf (uni-freiburg.de)3D U-Net: Learning Dense Volumetric Segmentation...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...