Web前端 ---- 【Vue】Vuex的使用(辅助函数、模块化开发)

目录

前言

Vuex是什么

Vuex的配置

安装vuex

配置vuex文件

Vuex核心对象

actions

mutations

getters

state

Vuex在vue中的使用

辅助函数

Vuex模块化开发


前言

本文介绍一种新的用于组件传值的插件 —— vuex

Vuex是什么

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

也就是说创建一个所有组件都可以共享数据的文件,当一个组件去改变这个共享数据时,其余使用该共享数据的组件中的数据也会改变。

vuex中有一个state属性,state属性中存放着共享的数据

Vuex的配置

安装vuex

vue2项目安装vuex3,vue3安装vuex4

npm i vuex@3

配置vuex文件

在vue cli脚手架文件中,在src中创建vuex文件夹,在vuex文件夹中创建store.js文件

在store.js文件中

先引入vue和安装好的vuex

import Vue from 'vue'import vuex from 'vuex'

将vuex进行全局挂载

Vue.use(vuex)

创键四个对象

const actions={}
const mutations={}
const state={}
const getters={}

创建store对象

const store = new Vuex.Store({actions:actions,mutations:mutations,state:state,getters:getter
})

导出store对象

export default store

导出store对象简写

export default new vuex.Store({actions,mutations,state,getters})

store.js文件中初始的配置代码

import Vue from 'vue'import vuex from 'vuex'Vue.use(vuex)const actions={}
const mutations={}
const state ={}
const getters = {}export default new vuex.Store({actions,mutations,state,getters})

在main.js中配置store配置项

Vuex核心对象

actions

actions对象中都是action函数

通过store.dispath触发该函数

action函数是可以支持任意异步操作的

action函数有两个参数,context和value

context是上下文

value是从组件中传过来的数据

用法

context.commit('mutations中的回调函数',value)

mutations

mutations对象中都是mutation函数

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

mutation函数就是用来更新state对象中的数据

mutation函数也有两个参数,state和value

mutation函数必须是同步函数

这也就是为什么会有action函数,action函数是可以支持任意的异步操作

getters

getter可以理解为计算属性

相当于组件中的computed

state

共享的数据存放在state中

相当于组件中的data

Vuex在vue中的使用

完成一个案例,在输入框中选择输入用户还是vip,分别添加到名单中,并分别统计两名单人数

以下是具体代码实现

创建两个组件

user和vip

user组件

<template><div><input type="text" v-model="username"><button @click="adduser">添加用户</button><ul><li v-for="user in $store.state.users" :key="user.id">{{ user.name }}</li></ul><h3>用户数量{{$store.state.users.length}}</h3><h3>vip数量{{$store.state.vips.length}}</h3></div>
</template><script>
export default {name:'userNormal',data(){return {username:''}},methods:{adduser(){this.$store.dispatch('user',{id:Date.now(),name:this.username})this.username=''}}
}
</script>

vip组件

<template><div><input type="text" v-model="vipname"><button @click="addvip">添加vip</button><ul><li v-for="vip in $store.state.vips" :key="vip.id">{{ vip.name }}</li></ul><h3>用户数量{{$store.state.users.length}}</h3><h3>vip数量{{$store.state.vips.length}}</h3></div>
</template><script>
export default {name:'vipUser',data(){return {vipname:''}},methods:{addvip(){this.$store.dispatch('vip',{id:Date.now(),name:this.vipname})this.vipname=''}}
}
</script>

store.js文件

import Vue from 'vue'import vuex from 'vuex'Vue.use(vuex)const actions={// 用户user(context,value){context.commit('saveuser',value)},// vipvip(context,value){context.commit('savevip',value)}
}
// 更新数据
const mutations={saveuser(state,value){state.users.push(value)},savevip(state,value){state.vips.push(value)}
}
const state ={users:[{id:'001',name:'张三'},{id:'002',name:'李四'},{id:'003',name:'王五'}],vips:[{id:'001',name:'王一'},{id:'002',name:'王二'},{id:'003',name:'王三'}]
}export default new vuex.Store({actions,mutations,state})

辅助函数

简化computed计算属性

...mapState()

...mapGetters()

简化methods方法

...mapActions()

...mapMuntations()

分为对象形式和数组形式

例:

...mapState({})和...mapState([ ])

这里使用了es6新语法中的扩展运算符...

扩展运算符浅显的就可以理解为将数组或对象中的数一个个取出来,去掉[ ],对象的话就是去掉{ }

例:

在上面的例子中,插槽中的代码过多,我们可以使用计算属性进行简化

在计算属性中定义两个计算属性,进行代码简化

computed:{users(){return this.$store.state.users},vips(){return this.$store.state.vips}}

在此基础上,我们使用辅助函数...mapState(),进一步简化计算属性

这里我们使用的是

...mapState()

简化的是带有$store.state.xxx

数组形式

   computed:{...mapState(['users','vips'])},

对象形式

computed:{...mapState({users:'users'},{vips:'vips'})
}

简化getters

computed:{reservednusername(){return this.$store.getters.reservednusername}
}

...mapGetters

简化的是带有$store.getters.xxx

数组形式

computed:{...mapGetters(['reservednusername'])
}

对象形式

computed:{...mapGetters({reservednusername:'reservednusername'})
}

简化methods方法

这里用

...mapActions()

简化 $store.dispatch()分发

对象形式

methods:{...mapActions({adduser:'adduser'})}

数组形式

methods:{...mapActions(['adduser'])
}

当代码逻辑简单时,可以直接使用commit提交到mutation函数处理

使用commit时,使用

...mapMutations()

简化 $store.commit()提交

对象形式

 methods:{...mapMutations({adduser:'saveuser'})}

数组形式

methods:{...mapMutations(['saveuser'])}

注意,数组形式要以mutation函数名为准,点击事件名要换成mution函数同名

Vuex模块化开发

将store.js文件中的内容根据不同页面进行拆分,将拆分的文件导出到store.js文件中

模块化下,组件中要变的不大

在mounted钩子函数中打印this.$store可知

在没有模块化之前

$store.state.users就可以获取到数组

但在模块化后

需要

$store.state.moduleuser.users才可以获取到数组

多一个模块名

因为需要知道获取的是哪个模块里面的数据

同时

在拆分的模块中,需要开启命名空间

namespaced:true

在模块化中使用辅助函数

只需要在前面加上模块名字即可

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

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

相关文章

【ArcGIS Pro微课1000例】0053:基于SQL Server创建与启用地理数据库

之前的文章有讲述基于SQL Server创建企业级地理数据库,本文讲述在SQL Server中创建常规的关心数据库,然后在ArcGIS Pro中将其启用,转换为企业级地理数据库。 1. 在SQL Server中创建数据库** 打开SQL Server 2019,连接到数据库服务器。 展开数据库连接,在数据库上右键→新…

(四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、Tiki-taka算法&#xff08;TTA&#xf…

基于SSH的java记账管理系统

基于SSH的java记账管理系统 一、系统介绍二、功能展示四、其他系统实现五、获取源码 一、系统介绍 项目类型&#xff1a;Java EE项目 项目名称&#xff1a;基于SSH的记账管理系统 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&#xff1a;HTML、CS…

初识优先级队列与堆

1.优先级队列 由前文队列queue可知&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;在此情况下&#xff0c;使用队列queue显然不…

git常用命令指南

目录 一、基本命令 1、创建分支 2、切换分支 3、合并分支 4、初始化空git仓库 二、文件操作 1、创建文件 2、添加多个文件 3、查看项目的当前状态 4、修改文件 5、删除文件 6、提交项目 三、实际操作 1、创建目录 2、进入新目录 3、初始化空git仓库 4、创建文…

C++STL的string模拟实现

文章目录 前言string的成员变量成员函数构造函数拷贝构造赋值重载 模拟实现string各种接口print迭代器普通迭代器const迭代器 string比较大小push_backinsert 和 eraseinserterase reserve和resizereserveresize swapfindcout和cincoutcin 前言 今天要讲string的底层实现&…

总线(什么是南北桥?您都用过哪些总线?)

什么是总线&#xff1f; 计算机系统中的总线&#xff08;Bus&#xff09;是指计算机设备和设备之间传输信息的公共数据通道&#xff0c;是连接计算机硬件系统内多种设备的通信线路&#xff0c;它的一个重要特征是由总线上的所有设备共享&#xff0c;因此可以将计算机系统内的多…

python基于轻量级GhostNet模型开发构建23种常见中草药图像识别系统

轻量级识别模型在我们前面的博文中已经有过很多实践了&#xff0c;感兴趣的话可以自行移步阅读&#xff1a; 《移动端轻量级模型开发谁更胜一筹&#xff0c;efficientnet、mobilenetv2、mobilenetv3、ghostnet、mnasnet、shufflenetv2驾驶危险行为识别模型对比开发测试》 《基…

Vue 核心 数据监听 computed | watch

Vue 核心 数据监听 computed | watch 一、今日学习目标 1.指令补充 指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素 2.computed计算属性 基础语法计算属性vs方法计算属性的完整写法成绩案例 3.watch侦听器 基础写法完整写法 4.综合案例 &#xff08;演示&…

selenium 解决 id定位、class定位中,属性值带空格的解决办法

一、前置说明 selenium遇到下面这种元素&#xff1a; <th id"demo id" class"value1 value2 value3 ">1、虽然id一般不会有空格&#xff0c;但是前端错误的这种写法(如下图)&#xff0c;会造成使用id定位不到元素&#xff0c;如&#xff1a; find…

IOday6作业

1>使用有名管道&#xff0c;完成两个进程的相互通信 //create.c #include<myhead.h>int main(int argc, const char *argv[]) {if((mkfifo("myfifo1",0664)) -1){perror("mkfifo");return -1;}if((mkfifo("myfifo2",0664)) -1){perror…

MYSQL练题笔记-高级查询和连接-这系列最后一题以及下个系列(子查询)的第一题

今天做了下面两题&#xff0c;到第三题的时候想了下但是没有太多的思路&#xff0c;然后看题解的时候实在是觉得自己不会&#xff0c;打算明天看吧。 1.按分类统计薪水相关的表和题目如下 我是想着简化问题&#xff0c;先找出薪水低于30000的员工&#xff0c;然后找这些员工的上…

JAVA 锁

乐观锁 乐观锁是一种乐观思想&#xff0c;即认为读多写少&#xff0c;遇到并发写的可能性低&#xff0c;每次去拿数据的时候都认为别人不会修改&#xff0c;所以不会上锁&#xff0c;但是在更新的时候会判断一下在此期间别人有没有去更新这个数据&#xff0c;采取在写时先读出…

Sam Altman当选“TIME时代周刊”2023年度最佳CEO!还有梅西、Taylor Swift当选...

TIME时代周刊昨日在官网公布了2023年最佳CEO—— Sam Altman当选! 此外&#xff0c;Taylor Swift当选年度最佳人物&#xff0c;梅西当选年度最佳运动员。 Sam Altman的当选可谓是实至名归&#xff01;没有谁能比火爆全球的ChatGPT背后&#xff0c;OpenAI的CEO更“成功”了。 …

ssh安装及问题解决

ssh安装及遇到的问题 ssh分为客户端 openssh-client 和服务器 openssh-server&#xff0c;可以利用以下命令确认是否安装&#xff1a; dpkg -l | grep ssh我用ubantu安装的&#xff0c;所以默认安装了客户端 安装客户端和服务器端的命令分别为&#xff1a; sudo apt-get ins…

金融量化交易:使用Python实现遗传算法

大家好&#xff0c;遗传算法是一种受自然选择过程启发的进化算法&#xff0c;用于寻找优化和搜索问题的近似解决方案。本文将使用Python来实现一个用于优化简单交易策略的遗传算法。 1.遗传算法简介 遗传算法是一类基于自然选择和遗传学原理的优化算法&#xff0c;其特别适用…

MySQL 教程 2.1

MySQL 插入数据 MySQL 表中使用 INSERT INTO 语句来插入数据。 你可以通过 mysql> 命令提示窗口中向数据表中插入数据&#xff0c;或者通过PHP脚本来插入数据。 语法 以下为向MySQL数据表插入数据通用的 INSERT INTO SQL语法&#xff1a; INSERT INTO table_name (colu…

使用Pytorch实现Grad-CAM并绘制热力图

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 看一下这个main cnn.py的文件 那这里我为了方便 就直接从官方的torch vision这个库当中导入一些我们常用的model 比如说我这里的例子是采用的mobile net v3 large这个模型 然后这里我将pretrain设…

微信小程序 纯css画仪表盘

刚看到设计稿的时候第一时间想到的就是用canvas来做这个仪表盘&#xff0c;虽然本人的画布用的不是很好但还可以写一写&#x1f600;。话不多说直接上代码。最后有纯css方法 <!--wxml--> <canvas canvas-id"circle" class"circle" >// js dat…

MySQL 忘记root密码后重置密码操作

在忘记 MySQL 密码的情况下&#xff0c;可以通过 --skip-grant-tables 关闭服务器的认证&#xff0c;然后重置 root 的密码&#xff0c;具体操作步骤如下。 步骤 1)&#xff1a;关闭正在运行的 MySQL 服务。打开 cmd 进入 MySQL 的 bin 目录。 步骤 2)&#xff1a;输入mysqld -…