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 项目。

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

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

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

相关文章

别找了!包含gpt在内的国内可以使用的Ai网站都在这了【最新可用】

在当今人工智能迅速发展的时代&#xff0c;智能创作与对话平台为用户提供了多样化的功能支持。以下是一些国内代表性的GPT平台&#xff0c;涵盖了从个人到企业的广泛需求&#xff0c;您可以根据自己的需求灵活选择。我们还为您整理了这些平台的链接&#xff0c;方便直接体验。&…

Redis学习Day3——项目工程开发

扩展阅读推荐&#xff1a; 黑马程序员Redis入门到实战教程_哔哩哔哩_bilibili 使用git命令行将本地仓库代码上传到gitee/github远程仓库-CSDN博客 一、项目介绍及其初始化 学习Redis的过程&#xff0c;我们还将遇到各种实际问题&#xff0c;例如缓存击穿、雪崩、热Key等问题&…

Ubuntu20.04+ros-noetic配置Cartographer

一、概述 因为要配置激光SLAM&#xff0c;Cartographer属于激光雷达SLAM 中比较经典的一款&#xff0c;在学习之前先将其在Ubuntu20.04首先配置出来并成功运行demo。 二、具体操作 &#xff08;一&#xff09;概述 使用平台是Windows的wsl2上的Ubuntu20.04子系统&#xff0c;…

C语言中的磁盘映射与共享内存详解

文章目录 C语言中的磁盘映射与共享内存1. 磁盘映射&#xff08;Memory Mapping&#xff09;1.1 磁盘映射的深入概念1.2 mmap函数的详细参数解析1.3 磁盘映射的高级应用场景1.3.1 大文件处理1.3.2 内存共享1.3.3 文件与内存同步1.3.4 内存映射数据库 1.4 完整的磁盘映射代码示例…

np.ndarray和np.array区别;MXNet的 mx.array 类型是什么;NDArray优化了什么:并行计算优化

目录 np.ndarray和np.array区别 np.ndarray np.array 举例说明 MXNet的 mx.array 类型是什么 NDArray优化了什么 1. 异步计算和内存优化 2. 高效的数学和线性代数运算 3. 稀疏数据支持 4. 自动化求导 举例说明 np.ndarray和np.array区别 在NumPy库中,np.ndarray和n…

如何看待IBM中国研发部裁员?

如何看待IBM中国研发部裁员&#xff1f;近日&#xff0c;IBM中国宣布撤出在华两大研发中心&#xff0c;引发了IT行业对于跨国公司在华研发战略的广泛讨论。这一决定不仅影响了众多IT从业者的职业发展&#xff0c;也让人思考全球化背景下中国IT产业的竞争力和未来发展方向。面对…

Java+vue的医药进出口交易系统(源码+数据库+文档)

外贸系统|医药进出口交易系统 目录 基于Javavue的服装定制系统 一、前言 二、系统设计 三、系统功能设计 仓储部门功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设…

2024.09.04 校招 实习 内推 面经

&#x1f6f0;️ &#xff1a;neituijunsir 交* 流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 海康威视2025届校园招聘正式启动&#xff08;内推&#xff09; 校招 | 海康威视2025届校园招聘正式启动&#xff08;内推&#xff09; 2、校招 | 沃飞长空2025届全球校…

中国书法——孙溟㠭浅析碑帖《三希堂法帖》

孙溟㠭浅析碑帖《三希堂法帖》 全称是《三希堂石渠宝笈法帖》&#xff0c;是中国清代宫廷刻帖&#xff0c;一共三十二册。 清朝高宗弘历收藏了晋王羲之《快雪时晴帖》&#xff0c;王献之的《中秋帖》&#xff0c;王珣的《伯远帖》三种王氏原墨迹。故而把所藏法书之所…

农产品管理与推荐系统Python+Django网页界面+计算机毕设项目+推荐算法

一、介绍 农产品管理与推荐系统。本系统使用Python作为主要开发语言&#xff0c;前端使用HTML&#xff0c;CSS&#xff0c;BootStrap等技术和框架搭建前端界面&#xff0c;后端使用Django框架处理应用请求&#xff0c;使用Ajax等技术实现前后端的数据通信。实现了一个综合性的…

2024年9月10日嵌入式学习

今日主要学习了缓冲帧。 Framebuffer&#xff08;帧缓冲&#xff09;是Linux系统为显示设备提供的一套应用程序接口&#xff0c;它将显存抽象为一种设备&#xff0c;允许上层应用程序在图形模式下直接进行显示缓冲区的读写操作。 原理&#xff1a;通过内存映射技术向显存空间…

MM-PhyQA——一个专门处理高中物理选择题的 LLM 聊天机器人

概述 论文地址&#xff1a;https://arxiv.org/abs/2404.12926 人工智能的发展正在改变我们的学习方式。特别是使用大规模语言模型&#xff08;LLM&#xff09;的聊天机器人&#xff0c;通过提供个性化指导和即时反馈&#xff0c;极大地拓展了教育的可能性。 然而&#xff0c…

带你深入了解C语言指针(一)

目录 前言 一、内存和地址 1. 内存 2. 究竟该如何理解编址 二、指针变量和地址 1. 取地址操作符&#xff08;&&#xff09; 2. 指针变量和解引用操作符&#xff08;*&#xff09; 2.1 指针变量 2.2 如何拆解指针类型 2.3 解引⽤操作符 3. 指针变量的大小 三、指…

JavaScript更改属性名称+增加字段+排序

JavaScript更改属性名称增加字段排序 背景 客户提供的接口里包含了一堆数据&#xff0c;其中分为多个模块&#xff0c;需要进行拆分&#xff0c;其中涉及到名称更改、字段增加、排序。处理过程 -需要的数据&#xff1a; data: {"四年级": [{ "class": &q…

LeetCode题练习与总结:矩形面积--223

一、题目描述 给你 二维 平面上两个 由直线构成且边与坐标轴平行/垂直 的矩形&#xff0c;请你计算并返回两个矩形覆盖的总面积。 每个矩形由其 左下 顶点和 右上 顶点坐标表示&#xff1a; 第一个矩形由其左下顶点 (ax1, ay1) 和右上顶点 (ax2, ay2) 定义。第二个矩形由其左…

jina-embeddings 的使用教程,怎么用它做embeddings和rerank的操作呢?

Jina-embeddings 使用教程 Jina-embeddings 是一个强大的工具&#xff0c;可以用来生成文本的嵌入向量&#xff08;embeddings&#xff09;&#xff0c;这些向量可用于相似度搜索、分类、重排序&#xff08;reranking&#xff09;等任务。在这个教程中&#xff0c;我将展示如何…

配置 MinGW 以及使用 g++ 编译 C++ 程序

如何在 Windows 上安装和配置 MinGW 以及使用 g 编译 C 程序 (C语言&#xff08;gcc&#xff09;类似 ) 在Windows环境下&#xff0c;使用C进行编程需要一个编译器&#xff0c;而MinGW (Minimalist GNU for Windows) 是一个常用的C/C编译器工具集。对于编程新手来说&#xff0c…

SOMEIP_ETS_101: SD_ClientServiceActivate_send_StopOfferService

测试目的&#xff1a; 验证当DUT在客户端模式下开始发送FindService消息时&#xff0c;测试器发送StopOfferService后&#xff0c;DUT能够理解其正在寻找的服务和实例ID不再可用&#xff0c;并停止为此服务和实例ID发送FindService消息。同时&#xff0c;DUT仍然可以发送Find-…

云曦2024秋季开学考

ezezssrf 第一关&#xff1a;md5弱比较 yunxi%5B%5D1&wlgf%5B%5D2 第二关&#xff1a; md5强比较 需要在bp中传参&#xff0c;在hackbar里不行 yunxiiM%C9h%FF%0E%E3%5C%20%95r%D4w%7Br%15%87%D3o%A7%B2%1B%DC V%B7J%3D%C0x%3E%7B%95%18%AF%BF%A2%00%A8%28K%F3n%8EKU%B3_B…

【HarmonyOS NEXT】实现网络图片保存到手机相册

【问题描述】 给定一个网络图片的地址&#xff0c;实现将图片保存到手机相册 【API】 phAccessHelper.showAssetsCreationDialog【官方文档】 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#showassetscreationdialog…