简单说明vuex

vuex

  • 知识结构
  • 配置
  • 调用

知识结构

vue用于管理公共数据的仓库

在这里插入图片描述

配置

  • state:所有公共数据的初始状态(初始值)

    export default {state: {count: 0,}
    };
    
  • mutations:修改state内容的方法(必须为同步方法)

    export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}}
    };
    
  • actions:修改state内容的异步相关方法,也需要通过mutations中的方法进行最终修改

    export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}}
    };
    
  • getters:仓库内的计算属性

    export default {state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}},getters: {power (state) {return state.count ** state.count;}}
    };
    
  • modules:在仓库内容过多时,避免命名重复或为了结构清晰,可以分为不同的module以此来区分

    // 在创建仓库时配置
    const store = createStore({modules: {a: moduleA,b: moduleB}
    })
    
  • 完整示例配置

    // store配置
    import Vuex from "vuex";
    import Vue from "vue";
    import count from "./count";
    import abc from "./abc";
    Vue.use(Vuex);const store = new Vuex.Store({modules: {count,abc,},strict: true, // 开启严格模式
    });export default store;
    
    // count module 配置
    export default {// namespaced: true, // 开启命名空间state: {count: 0,},mutations: {increase(state,payload){state.count += payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {context.commit('increase',10);}, 1000)}},getters: {power (state) {return state.count ** state.count;}}
    };
    
    // abc module 配置
    export default {state: {abc: '',},mutations: {set(state,payload){state.abc = payload;}},actions: {asycIncrease(context,payload){setTimeout(() => {// 最终还是使用的commitcontext.commit('set',"well");}, 1000)}}
    };
    
  • strict: true,开启严格模式

    规定state中的状态只能通过mutations中的方法改变,但是其实也可以直接使用this.$store.state.count = 1这种改变状态,开启严格模式后使用直接赋值时就会报错

  • namespaced: true,开启命名空间

    当不同module中有同名的方法时,直接commit就容易混乱,打开命名空间后,调用方法就必须加上此module名作为前缀,如下:

    import Vue from "vue";
    import store from "./store";const num = store.getters["count/power"];
    

调用

  • commit

    用于调用mutations中的方法

    <template><div><div id="button"><button @click="handleClick">button</button></div></div>
    </template><script>
    import Vue from "vue";
    import store from "./store";
    export default {methods: {handleClick(){store.commit("count/increase",1);}},
    };
    </script>
    
  • dispatch

    用于调用异步方法

    <template><div><div id="button"><button @click="handleClick">button</button></div></div>
    </template><script>
    import Vue from "vue";
    import store from "./store";
    export default {methods: {handleClick(){store.dispatch("count/asycIncrease",2);}},
    };
    </script>
    
  • mapState:用于让我们方便的使用计算属性封装state,有多种写法

    import { mapState } from 'vuex'export default {computed: mapState({count: state => state.count,})
    }export default {computed: {count: ...mapState("count", ["count"]);}
    }
    
  • mapGetters:将 store 中的 getter 映射到局部计算属性,这种map函数几乎都是这样的作用

    import { mapGetters } from 'vuex'export default {computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters('count',['power'])}
    }
    
  • mapMutations:简化函数封装

    import { mapMutations } from 'vuex'export default {// ...methods: {...mapMutations('count',['increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`]),}
    }
    
  • mapActions:简化异步方法封装

    import { mapActions } from 'vuex'export default {methods: {...mapActions('count',['asycIncrease', // 将 `this.asycIncrease()` 映射为 `this.$store.dispatch('asycIncrease')`})}
    }
    

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

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

相关文章

分类算法——决策树 详解

决策树的底层原理 决策树是一种常用的分类和回归算法&#xff0c;其基本原理是通过一系列的简单决策&#xff0c;将数据集划分为多个子集&#xff0c;从而实现分类。决策树的核心思想是通过树形结构表示决策过程&#xff0c;节点代表特征&#xff0c;边代表决策&#xff0c;叶子…

Nature Electronics 用于语音识别的液体声传感器,基于悬浮在载液的钕-铁-硼磁性纳米颗粒

近年来&#xff0c;工程师们开发了一系列越来越复杂的传感器&#xff0c;用于机器人、便携式、可穿戴甚至植入式监测。然后&#xff0c;可以使用最先进的机器学习来分析这些传感器收集的数据&#xff0c;使设备能够识别音频中的特定声音、图像中的对象或其他信息。加州大学洛杉…

NVR批量管理软件/平台EasyNVR多个NVR同时管理支持视频投放在电视墙上

在当今智能化、数字化的时代&#xff0c;视频监控已经成为各行各业不可或缺的一部分&#xff0c;无论是公共安全、交通管理、企业监控还是智慧城市建设&#xff0c;都离不开高效、稳定的视频监控系统的支持。而在这些应用场景中&#xff0c;将监控视频实时投放到大屏幕电视墙上…

【GeoJSON在线编辑平台】(0)项目启动与前言

前言 事情是这样的…… 有这么一个项目&#xff0c;需要开发一个在线的标注平台。以天地图为底图&#xff0c;在天地图上标注出一些特征地物&#xff0c;比如描出农田耕地房屋建筑之类的要素。 这个需求简化一下其实就是一个在线的矢量编辑平台&#xff0c;通过绘制多边形功能…

豆包,攻克数字是个什么工具?《GKData-挖掘数据的无限可能》(数据爬虫采集工具)

豆包&#xff0c;攻克数字是个什么工具&#xff1f; “攻克数字” 指的是 “攻克数字&#xff08;GKData&#xff09;” 这样一款工具。是一款针对网页、APP中数据自动解析转表存入数据库的软件&#xff0c;为数据工作者而生。它是一个不会编程也能用的可视化数据解析为标准二…

【成都新篇】龙信科技电子取证实验室,引领科技取证新时代

文章关键词&#xff1a;电子数据取证实验室、手机取证、介质取证、云取证、现场勘查、电子物证 在科技创新的浪潮中&#xff0c;龙信科技成都实验室以其卓越的电子数据取证服务&#xff0c;成为了中西部地区一颗璀璨的明珠。随着新址的搬迁&#xff0c;我们不仅扩大了业务范围…

【C/C++】字符/字符串函数(1)——由string.h提供

零.导言 什么是字符/字符串函数呢&#xff1f; 其实就是一类用于处理字符和字符串的函数。 而其中一部分函数包含在头文件 string.h 中&#xff0c;有 strlen strcpy strcat strcmp strncpy strncat strncmp strstr strtok strerror 等等 接下来我将逐个讲解这些函数。 一.str…

硅谷甄选(11)角色管理

角色管理模块 10.1 角色管理模块静态搭建 还是熟悉的组件&#xff1a;el-card、el-table 、el-pagination、el-form <template><el-card><el-form :inline"true" class"form"><el-form-item label"职位搜索"><el-…

鸿蒙UI开发——基于全屏方案实现沉浸式界面

1、概 述 典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条。 其中状态栏和导航条&#xff0c;通常在沉浸式布局下称为避让区&#xff0c;避让区之外的区域称为安全区。 开发应用沉浸式效果主要指&#xff1a;通过调整状态栏、应用界面和导航条的显示效果来减少状态…

规划误差降低27%,碰撞率降低33%Senna: 大规模视觉-语言模型与端到端自动驾驶相结合

Abstract 端到端自动驾驶在大规模数据中展示了强大的规划能力&#xff0c;但在复杂、罕见的场景中仍然因常识有限而表现不佳。相比之下&#xff0c;大型视觉语言模型&#xff08;LVLMs&#xff09;在场景理解和推理方面表现出色。前进的方向在于融合两者的优势。以往利用LVLMs…

openpnp - 手工修改配置文件(元件高度,size,吸嘴)

文章目录 openpnp - 手工修改配置文件(元件高度,size,吸嘴)概述笔记parts.xmlpackages.xml 手工将已经存在的NT1,NT2拷贝出来改名备注END openpnp - 手工修改配置文件(元件高度,size,吸嘴) 概述 载入新板子贴片准备时&#xff0c;除了引入Named CSV文件&#xff0c;还要在ope…

硬件电子器件学习笔记

系列文章目录 文章目录 系列文章目录电阻碳质电阻器线绕电阻 变压器自耦变压器隔离变压器 电阻 碳质电阻器 CCR&#xff1a; 优点&#xff1a;体积大&#xff0c;吸收脉冲电流、防浪涌。缺点&#xff1a;温度系数、稳定性差、吸水后也会变化、随着使用会变化。 医用除颤仪可…

推荐一款射频与微波电路设计软件:Keysight Genesys

Keysight PathWave RF Synthesis Genesys是一款专为射频 (RF) 和微波电路设计与仿真而开发的软件解决方案&#xff0c;属于 Keysight Technologies 的 PathWave 软件平台。此平台为无线通信系统的设计、仿真和验证提供了全面的工具支持。Genesys 在电路设计方面具备高度专业性&…

创新业态下金融头部机构在 FICC 平台建设上的思考与实践

近年来&#xff0c;FICC 投资交易呈现活跃多元态势&#xff0c;创新转型稳步推进。FICC 平台电子化方兴未艾&#xff0c;是机构提升服务效率和质量的一大着力点。因此&#xff0c;在 FICC 平台建设上&#xff0c;许多机构都进行了深入研究&#xff0c;积累了丰富的实践经验。 …

(五)Web前端开发进阶2——AJAX

目录 1.Ajax概述 2.Axios库 3.认识URL 4.Axios常用请求方法 5.HTTP协议——请求报文/响应报文 6.HMLHttpRequest对象 7.前后端分离开发&#xff08;接口文档&#xff09; 8.Element组件库 1.Ajax概述 AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。…

linux文件的权限

前言 在linux操作系统中&#xff0c;账户分为两类&#xff0c;一类是普通用户&#xff0c;一类是超级用户&#xff0c;普通用户在许多方面受权限约束&#xff0c;而超级用户几乎不受约束。 root账户和普通账户的切换 有三种方式能够切换账号 su su 直接使用&#xff0c;会弹…

【CSS3】css开篇基础(5)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

net framework 3.5组件更新失败错误代码0x80072f8f怎样解决

浏览器地址栏输入www.dnz9.com远程解决netframework问题 当遇到.NET Framework 3.5 组件更新失败&#xff0c;错误代码为 0x80072f8f 时&#xff0c;可以尝试以下几种解决方法&#xff1a; 一、检查网络连接和时间设置 网络连接 错误代码 0x80072f8f 通常与网络相关问题有关。首…

STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器

1、简要说明与电路图 LED灯与蜂鸣器都是GPIO的输出操作&#xff0c;给高低电平实现。GPIO操作也是后续操作的基础&#xff0c;没有什么难度&#xff0c;记不住寄存器没关系&#xff0c;只要把流程理清楚就可以了。 端口配置成推挽输出模式&#xff0c;高低电平均有驱动能力。 …

计算机网络网络层笔记

互联网提供的两种服务 1.虚电路服务 2.数据报服务 需要记住的是现在只用第二种也就是数据报服务 网际协议IP 物理层的中断系统:转发器(hub) 链路层的中断系统:交换机 网络层的中断系统:路由器 网络层以上:网关 如上图所示,网关是用来访问其他的网段的一个接口,网关的地…