详细说说vuex

  • Vuex 是什么
    • Vuex有几个属性及作用
    • 注意事项
    • vuex 使用举例
    • Vuex3和Vuex4有哪些区别
      • 创建 Store 的方式
      • 在组件中使用 Store
      • 辅助函数的用法
      • 响应式的改进
      • Vuex4 支持多例模式

Vuex 是什么

Vuex是一个专门为Vue.js应用设计的状态管理构架,它统一管理和维护各个Vue组件的可变化状态。

Vuex采用 集中式存储管理应用 的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

Vuex可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等。

当多个组件依赖于同一个状态时,由于多层嵌套使得传参的方法变得复杂,另外如果使用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,会使得该模式变得脆弱,从而无法维护代码。

这时就需要使用Vuex来解决这个问题。

更多详细内容,请微信搜索“前端爱好者戳我 查看

Vuex有几个属性及作用

Vuex有五个主要属性,包括:

  • state、
  • getters、
  • mutations、
  • actions、
  • modules**

下面分别阐述它们的作用:

  1. state:vuex的基本数据,用来存储变量。
  2. getters:从基本数据(state)派生的数据,相当于state的计算属性。
  3. mutations:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和一个回调函数 (handler)。回调函数是进行实际状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
  4. actions:和mutation的功能大致相同,不同之处在于actions提交的是 mutation,而不是直接变更状态。并且,action可以包含任意异步操作。简单的说就是异步操作数据,view 层通过 store.dispath 来分发action
  5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

注意事项

  • 只用来读取的状态集中放在 store 中; 改变状态的⽅式是提交 mutations , 这是个同步的事物; 异步逻辑应该封装在 action 中。
  • 在 main.js 引⼊ store , 注⼊ 。新建了⼀个目录 store , … export
  • 场景有:单页应用中, 组件之间的状态 、音乐播放 、登录状态 、加⼊购物车

vuex 使用举例

Vuex 是一个用于 Vue.js 的状态管理工具,它使得我们可以将应用中多个组件共享的状态抽取出来,统一管理。

下面是一个简单的 Vuex 使用示例:

  1. 安装 Vuex:
npm install vuex --save
  1. 在项目中引入 Vuex 并创建一个 Vuex Store:
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0,},mutations: {increment(state) {state.count++;},decrement(state) {state.count--;},},
});

在上面的代码中,我们创建了一个 Vuex Store,定义了一个 count 状态,以及两个修改该状态的 mutation 方法 incrementdecrement

  1. 在 Vue 组件中使用 Vuex Store:
import Vue from 'vue';
import store from './store';new Vue({el: '#app',store,computed: {count() {return this.$store.state.count;},},methods: {increment() {this.$store.commit('increment');},decrement() {this.$store.commit('decrement');},},
});

在上面的代码中,我们在 Vue 组件中通过 this.$store 访问 Vuex Store,通过 this.$store.state.count 访问 count 状态,通过 this.$store.commit('increment')this.$store.commit('decrement') 调用 mutation 方法修改状态。

以上就是一个简单的 Vuex 使用示例,通过 Vuex 我们可以方便地管理应用中多个组件共享的状态。

Vuex3和Vuex4有哪些区别

Vuex 3 是用于 Vue 2 的版本,而 Vuex 4 是用于 Vue 3 的版本。

下面是 Vuex 3 和 Vuex 4 在一些重要方面的异同点:

创建 Store 的方式

Vuex 3:使用 new Vuex.Store() 创建 store 实例

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)const store = new Vuex.Store({// 配置项
})export default store

Vuex 4:使用 createStore 函数创建 store 实例

import { createStore } from 'vuex'const store = createStore({// 配置项
})export default store

Vuex 4 中使用 createStore 函数来创建 store 实例,而不是直接在 Vue 实例上挂载。

在组件中使用 Store

Vuex 3

  • 使用 this.$store 访问 store 实例,
  • 通过 this.$store.state 访问状态,
  • 通过 this.$store.commit() 进行提交 mutation,
  • 通过 this.$store.dispatch() 进行分发 action。
export default {computed: {count() {return this.$store.state.count}},methods: {increment() {this.$store.commit('increment')},incrementAsync() {this.$store.dispatch('incrementAsync')}}
}

Vuex 4

  • 使用 useStore 函数来获取 store 实例,
  • 通过 store.state 访问状态,
  • 通过 store.commit() 进行提交 mutation,
  • 通过 store.dispatch() 进行分发 action。
import { useStore } from 'vuex'export default {setup() {const store = useStore()const count = computed(() => store.state.count)const increment = () => {store.commit('increment')}const incrementAsync = () => {store.dispatch('incrementAsync')}return {count,increment,incrementAsync}}
}

虽然 Vuex4 推荐使用更符合 Composition API 风格的 useStore() 来获取 store 实例。

但是并没有移除 this.$store,但是在 <template> 和 Vue2 选项式写法中还是支持使用 $store 的。

辅助函数的用法

Vuex 3

使用 mapState、mapGetters、mapMutationsmapActions 辅助函数来进行映射,简化在组件中对 store 的访问。

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'export default {computed: {...mapState(['count']),...mapGetters(['doubleCount']),},methods: {...mapMutations(['increment']),...mapActions(['incrementAsync']),}
}

Vuex 4:使用 Composition API 中的 computed 函数和普通的 JavaScript 函数来实现类似的功能。

import { computed, useStore } from 'vuex'export default {setup() {const store = useStore()const count = computed(() => store.state.count)const doubleCount = computed(() => store.getters.doubleCount)const increment = () => {store.commit('increment')}const incrementAsync = () => {store.dispatch('incrementAsync')}return {count,doubleCount,increment,incrementAsync}}
}

Vuex4 支持选项式写法的辅助函数,在使用时和 Vuex3 一模一样的。

但是需要注意辅助函数不能在组合式写法 setup 中使用。

响应式的改进
  • Vuex 3:使用 Vue 2 的响应式系统 ( Object.defineProperty ) 进行状态的监听和更新。
  • Vuex 4:使用 Vue 3 的响应式系统 ( proxy ) 进行状态的监听和更新,可以利用 Composition API 中的reactive 和 computed 函数进行更加灵活和高效的状态管理。

实质上这是 Vue2 和 Vue3 的区别,只是由于 Vue 2 匹配的 Vuex 3,Vue 3 匹配的 Vuex 4 的原因,严格来说不能算作 Vuex3 与 Vuex4 的不同。

Vuex4 支持多例模式

Vuex 3 是单例模式的,即整个应用只能有一个全局的 Vuex Store 实例。

而在 Vuex 4 中,你可以通过 useStore 函数在不同组件中创建多个独立的 Vuex Store 实例,从而支持多例模式。

以下是一个示例展示了如何在 Vuex 4 中使用 useStore 辅助函数创建多个独立的 Vuex Store 实例:

<template><div><p>Counter 1: {{ counter1 }}</p><p>Counter 2: {{ counter2 }}</p><button @click="incrementCounter1">Increment Counter 1</button><button @click="incrementCounter2">Increment Counter 2</button></div>
</template><script>
import { useStore } from 'vuex'export default {setup() {// 使用 useStore 辅助函数创建 Vuex Store 实例const store1 = useStore('store1')const store2 = useStore('store2')// 通过 store1.state.count 获取第一个 Store 的状态const count1 = store1.state.count// 通过 store2.state.count 获取第二个 Store 的状态const count2 = store2.state.count
​// 通过 store1.commit() 提交 mutations 到第一个 Storeconst incrementCounter1 = () => {store1.commit('increment')}// 通过 store2.commit() 提交 mutations 到第二个 Storeconst incrementCounter2 = () => {store2.commit('increment')}return {count1,count2,incrementCounter1,incrementCounter2}}
}
</script>

上述示例展示了如何在 Vue 组件中使用 useStore 辅助函数创建多个独立的 Vuex Store 实例,并通过这些实例分别访问和修改各自的状态和 mutations。

这是 Vuex 4 相对于 Vuex 3 的一个重要的改进,使得 Vuex 在支持多例模式的场景下更加灵活和可扩展。

参考文档

  • https://www.jb51.net/article/281760.htm
  • Vuex 4 官方文档:vuex.vuejs.org/zh/
  • Vuex 3 官方文档:v3.vuex.vuejs.org/zh/

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

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

相关文章

【深度学习】Pytorch 系列教程(一):PyTorch数据结构:1、Tensor(张量)及其维度(Dimensions)、数据类型(Data Types)

文章目录 一、前言二、实验环境三、PyTorch数据结构0、分类1、Tensor&#xff08;张量&#xff09;1. 维度&#xff08;Dimensions&#xff09;0维&#xff08;标量&#xff09;1维&#xff08;向量&#xff09;2维&#xff08;矩阵&#xff09;3维张量 2. 数据类型&#xff08…

报告称超 5 成职场人员有兼职 ,有人因做副业被降薪或被辞,有哪些信息值得关注?你有下班兼职的打算吗?

在职程序员分享身边几个做兼职的案例&#xff1a; 前领导从21年开始做小红书账号&#xff0c;粉丝30w&#xff0c;月入5w左右&#xff1b; 隔壁工位的哥们每隔几个月都会在平台接点小单&#xff0c;今年赚了小几万&#xff1b; 室友每天开车上班顺便接顺风车单子&#xff0c;一…

推荐一款好用的包含表格识别的OCR网站

在当今数字化的时代&#xff0c;文字和表格识别已经成为了许多行业的关键技术。无论是处理大量的纸质文档&#xff0c;还是从网络上收集数据&#xff0c;OCR&#xff08;光学字符识别&#xff09;技术都扮演着重要的角色。然而&#xff0c;对于许多用户来说&#xff0c;OCR软件…

螺旋矩阵算法(leetcode第885题)

题目描述&#xff1a; 在 rows x cols 的网格上&#xff0c;你从单元格 (rStart, cStart) 面朝东面开始。网格的西北角位于第一行第一列&#xff0c;网格的东南角位于最后一行最后一列。你需要以顺时针按螺旋状行走&#xff0c;访问此网格中的每个位置。每当移动到网格的边界之…

GradNorm理解

主要参考这一篇&#xff0c;GradNorm&#xff1a;Gradient Normalization for Adaptive Loss Balancing in Deep Multitask Networks&#xff0c;梯度归一化_grad norm-CSDN博客 14:20-15:30 提前需要理解的概念 损失函数&#xff0c;衡量ypred与ytruth的差距。 Grad Loss定…

盲盒小程序如何盈利?创业新模式

当前&#xff0c;盲盒的影响力越来越大&#xff0c;深受年轻人的热爱&#xff0c;受众群体逐渐增加&#xff0c;盲盒的市场规模不断扩大。 在当下社交媒体时代&#xff0c;盲盒也转到了互联网上&#xff0c;根据网络的传播&#xff0c;盲盒也迎来了新一轮的发展&#xff0c;“…

在服务器上配置jupyter notebook便于本地访问

文章目录 需求配置1. 安装jupyter2. 生成配置文件3. 设置登录密码并生成秘钥a. 打开服务器的终端b. 设置密码 4. 修改配置文件a. 进入配置文件所在的文件夹b. 编辑配置文件jupyter_notebook_config.pyc. 保存文件 5. 在服务器上生成jupyter访问地址 关注公众号&#xff1a;『 …

C# WinForm 跨线程访问控件

写在前面 在WinForm开发中&#xff0c;经常会碰到主线程代码运行过程中需要刷新窗体控件的情况&#xff0c;如果直接在其他线程中去操作窗体控件&#xff0c;这时会抛出线程间操作无效的异常信息&#xff0c;因为窗体控件是由主线程创建的&#xff0c;C#强制要求代码必须是线程…

SAP 标准GUI 中增加按钮时报错:EC181

今天在打一个note的时候&#xff0c;需要做一些手动的调整&#xff0c;其中的步骤就需要我去在标准的GUI STATUS 增加按钮 我在进入编辑模式的时候&#xff0c;直接去插入的时候&#xff0c;始终报错如下&#xff1a; Function code xxxx has not been assigned to a functio…

使用matlab制作声音采样率转换、播放以及显示的界面

利用matlab做一个声音采样率转换、播放以及显示的界面 大抵流程&#xff1a; 图形界面创建&#xff1a;使用figure函数创建名为“声音采样率转换”的图形界面&#xff0c;并设置了其位置和大小。 按钮和文本框&#xff1a;使用uicontrol函数创建了选择音频文件的按钮、显示当前…

js基础之事件监听案例入门

事件绑定 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&…

【IDEA】关于快捷键行注释时会从行首开始注释

前言 每次在使用IDEA写代码时&#xff0c;用快捷键进行行注释的时候&#xff0c;//会处于行首位置 但是我们想要的是这种注释效果 修改 IDEA中打开settings 找到Editor - Code Style- Java - 找到Code Genneration&#xff0c;取消勾选Line comment at first column&#x…

汽车内饰设计开发流程(入门基础)

1 开发流程简介 2 汽车内饰的子系统&#xff08;分类&#xff09; 1 软内饰&#xff08;顶棚、地毯、座椅&#xff09; 2 硬内饰&#xff08;仪表板、副仪表板护、A柱饰板、B柱饰板、C柱饰板、门槛、侧围饰板、背门饰板&#xff09; 3内外饰板的分类&#xff1a;功能件和装饰…

Linux的重定向

Linux中的重定向是将程序的输入流或输出流从默认的位置改变到指定的位置。可以使用特殊的符号来实现重定向操作。&#xff08;文中command代表命令&#xff09; &#xff08;1&#xff09;重定向命令列表 命令 说明 command > file …

第16章 网络io与io多路复用select/pool/epool

第16.1节 写一个服务端代码 服务端代码 #include <stdio.h> #include <errno.h> #include <string.h> #include <unistd.h> #include <sys/socket.h> #include <netinet/in.h>#include <fcntl.h>int main() {//openint sockfd sock…

考试的最大困扰度

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 1、题目描述 一位老师正在出一场由 n 道判断题构成的考试&#xff0c;每道题的答案为 true &#xff…

Hexo部署到云服务器后CSS样式无效的问题

Hexo部署到云服务器后CSS样式无效的问题 01 前言 趁活动入手了一个云服务器&#xff08;Linux&#xff09;&#xff0c;打算简单挂个博客上去&#xff0c;因为之前部署到github有了一些经验&#xff0c;所以还是选择使用Hexo。中间步骤略&#xff0c;部署完使用浏览器访问的时…

HT4125 低压CMOS 缓冲门器件 单电源电压转换

​​亿胜盈科HT4125 是一款低压CMOS 缓冲门器件&#xff0c;可运行在针对便携式和电池设备的更宽电压范围内。 其采用了较低阀值电路来设计此输入&#xff0c;以便匹配Vcc 3.3V 时的1.8V 输入逻辑&#xff0c;并且可被用 在1.8V 至3.3V 电平上行转换器功能中。此外&#xff0c;…

RabbitMQ的详细使用

消息队列RabbitMQ的详细使用 文章目录 消息队列RabbitMQ的详细使用MQ 的相关概念什么是MQ为什么要用MQMQ 的分类MQ 的选择 RabbitMQRabbitMQ 的概念四大核心概念各个名词介绍安装RabbitMQWeb管理界面及授权操作Docker 安装 Hello world简单示例 Work Queues轮训分发消息消息应答…

用友时空 KSOA 多处SQL注入漏洞复现

0x01 产品简介 用友时空 KSOA 是建立在 SOA 理念指导下研发的新一代产品,是根据流通企业前沿的 IT 需求推出的统一的IT基础架构,它可以让流通企业各个时期建立的 IT 系统之间彼此轻松对话。 0x02 漏洞概述 用友时空 KSOA 系统 PayBill、QueryService、linkadd.jsp等接口处…