Vue中Vuex的环境搭建和原理分析及使用

Vuex的环境搭建

  • Vuex是Vue实现集中式数据管理的Vue的一个插件,集中式可以理解为一个老师给多个学生讲课。

  • Vue2.0版本的安装:

  • npm i vuex@3
  • 使用Vuex需要在store中的index.js引入Vuex和main.js中引入store,目的是让vm和vc都能看到$store。实现多个组件对数据集中式的管理(读/写)。

  • main.js文件

  • import Vue from 'vue'
    import App from './App.vue'
    //正确的应用应该是Vuex插件使用后才能有store这个平台。但store创建完毕后Vuex插件还没有使用也就是Vue.use(Vuex)没运行在store创建之前,故将其放到store中的index.js中
    import store from './store'
    ​
    new Vue({router,// 引入之后要使用store,这里使用了缩写形式store,render: h => h(App),
    }).$mount('#app')
     
  • 操作Vuex要用到$store,故创建store文件和包含在store文件的index.js文件

  • import Vue from 'vue'
    // 在创建store之前,将Vuex配置完成
    import Vuex from 'vuex'
    Vue.use(Vuex)
    // 准备actions--用来响应组件中的动作
    const actions = {}
    ​
    // 准备mutations--用于操作数据(state)
    const mutations = {}
    ​
    // 准备state--用于存储数据
    const state = {}
    // 创建并暴露store
    export default new Vuex.Store({// 下面的代码state:state可以缩写成state。state:state,// getters:getters,mutations:mutations, actions:actions, // modules:modules,
    })

Vuex的原理分析及使用

  • Vuex的原理分析:

    1、黄线:从VueComponents(组件)出发,组件通过dispatch("key",value)函数将key(动作类型)和value(数据)传给Actions。Actions本质上是对象,Actions有一个和传过来的key相对应的key值而Action中的value是一个函数并且该函数会调用,将组件传过来的value值接收。

    2、红线:Commit的作用和Dispatch一致,Mutations和Action不同的是,Mutations的value函数有State和value值(组件传过来的)

    3、蓝线:Mutate为加工的意思,Mutate不是API不需要他传数据,因为Mutations已经有State的通信

    4、灰线:Render将State中的数据重新渲染交给VueComponents

    5、VueComponents可以调用commit函数直接将数据value传给Mutations。可以这样理解:客人和后厨很熟不需要经过服务员,后厨直接可以做菜

    6、Backend API为后端的接口,组件传递的value值可以是从后端获取的value值。Devtools为开发者工具

    7、Vuex是有一个store来管理Actions、Mutations、State。store为存储的意思

  • 下面为Vuex的案例展示

  • 案例目的:将sum变量作为共享数据,通过store操作Vuex实现数据的更新

  • MyFooter组件

  • <template><div ><!-- 找到state --><h1>当前的求和为:{{ $store.state.sum }}</h1><select v-model.number="n"><!-- value前面加入冒号将引号的内容将表达式解析,这样避免了选择数字Vue当成字符串 --><!-- 也可以在select标签中v-model.number强制转换成数字 --><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数在加</button><button @click="incrementWait">等等在加</button></div>
    </template>
    ​
    <script>
    export default {name: 'MyFooter',data(){return {n:1,sum:0
    ​}},methods:{//increment和decrement没有业务要求,故可以直接省略服务员和后厨对话。increment(){// jia这个动作类型Actions要有对应。故去score的index.js配置this.$store.dispatch('jia',this.n)// this.$store.commit('JIA',this.n) 直接commit和后厨对话,还要删除score的index.js中的jia和jian两个函数才能正常运行},decrement(){this.$store.dispatch('jian', this.n)// this.$store.commit('JIAN', this.n)},incrementOdd(){//判断偶数的条件到store的index.js的actions中写this.$store.dispatch('jiaOdd', this.n)},incrementWait(){this.$store.dispatch('jiaWait', this.n)}}  
    }
    </script>
    <style lang="css">button{margin-left: 5px;}
    </style>
  • store文件的index.js文件

  • import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    // actions可以用于专门的写业务的逻辑。如:if() 理解:所有的要求跟服务员讲,后厨的地方闲人勿进
    const actions = {// 可以缩写为jia(){}。jia()括号中context有上下文的意思,可以理解为小型的store。jia:function(context,value){console.log("actions中的jia可以使用了",context,value);// 调用commit函数。建议:写关于mutations的动作类型都改成大写context.commit('JIA',value)},jian(context,value){context.commit('JIAN', value)},//这里注意一下jiaOdd和JIA是不同的,不要固定的认为JIA的位置应该写成JIAODD。是jiaOdd和MyFooter中的incrementOdd函数中的jiaOdd对应,JIA和下面mutations中的JIA对应jiaOdd(context,value){if(context.state.sum %2 == 0){context.commit("JIA", value)}},jiaWait(context,value){setTimeout(() => {context.commit("JIA",value)},5000)}
    }
    const mutations = {// 这里的方法名要是JIA才能正常运行,JIA(state,value){console.log("mutations中的JIA被调用",state,value);// 实现jia函数的相加功能,JIA()中的state是一个对象和Vue中的data函数一样。如果要展示数据通过this.$store.statestate.sum += value},JIAN(state,value){console.log("mutations中的JIAN被调用", state, value);state.sum -= value}
    }
    const state = {// 定义sum变量sum:0
    }
    ​
    export default new Vuex.Store({state:state,mutations:mutations, actions:actions, 
    })

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

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

相关文章

linux嵌入式开发常用

常用命令 nm命令 功能描述 nm是name的缩写&#xff0c;它显示指定文件中的符号信息&#xff0c;文件可以是对象文件、可执行文件或对象文件库。如果文件中没有包含符号信息&#xff0c;nm报告该情况&#xff0c;单不把他解释为出错。nm缺省情况下报告十进制符号表示法下的数…

降噪自编码器(Denoising Autoencoder)

降噪自编码器&#xff08;Denoising Autoencoder&#xff09;是一种用于无监督学习的神经网络模型。与普通的自编码器不同&#xff0c;降噪自编码器的目标是通过在输入数据中引入噪声&#xff0c;然后尝试从具有噪声的输入中重建原始无噪声数据。 以下是降噪自编码器的主要特点…

基于SSM的停车管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Pytest自动化测试框架

1、pytest简介 pytest是Python的一种单元测试框架&#xff0c;与python自带的unittest测试框架类似&#xff0c;但是比unittest框架使用起来更简洁&#xff0c;效率更高。 执行测试过程中可以将某些测试跳过&#xff0c;或者对某些预期失败的case标记成失败能够支持简单的单元…

关于vite的glob坑

我先展示一段代码&#xff1a; /*** function 根据pages路径动态生成路由* param {Array} 基础路由*/ export default function (routes) {const modules import.meta.glob("../pages/**/page.js", { eager: true, import: "default" });const comps im…

企业固态驱动器行业研究:到2025年市场超过600亿美元

固态驱动器&#xff08;SSD&#xff09;市场在过去几年中呈现出稳定的增长趋势&#xff0c;预计将在未来几年继续保持这种增长。SSD市场的主要驱动因素包括云计算、大数据和物联网等新兴技术的普及&#xff0c;以及消费者对高速、高效和可靠存储解决方案的需求。全球市场分析&a…

c++求水仙数/c++水仙花数学习

C水仙花数-深入浅出.学习与讲解 水仙花数&#xff0c;又称阿姆斯特朗数&#xff0c;是指一个n位数 (n≥3)&#xff0c;它的每个位上的数字的n次幂之和等于它本身。例如&#xff1a;153是一个水仙花数&#xff0c;因为153153。 在C中&#xff0c;我们可以使用循环和条件判断来…

如何让ArcGIS Pro启动显示空白页面

刚接触ArcGIS Pro的你是否会觉得在操作上有那么一些不习惯&#xff0c;从一开始软件启动就发现和ArcGIS差距很大&#xff1a;丰富的欢迎页面&#xff0c;加上默认加载的地图让你眼花缭乱&#xff0c;这里教你如何去掉这些繁杂的内容&#xff0c;还你一个干净的启动页面。 跳过…

机器人说明书---名词解释027课_python语言_匿名函数

目录 匿名函数语法return 语句强制位置参数 视频讲解 匿名函数 Python 使用lambda 来创建匿名函数。 所谓匿名&#xff0c;意即不再使用 def 语句这样标准的形式定义一个函数。 lambda 只是一个表达式&#xff0c;函数体比 def 简单很多。lambda 的主体是一个表达式&#xff…

【算法】算法设计与分析 期末复习总结

第一章 算法概述 时间复杂度比大小&#xff0c;用代入法&#xff0c;代入2即可。求渐进表达式&#xff0c;就是求极限&#xff0c;以极限为O的括号&#xff1b;O是指上界&#xff0c;Ω是指下界&#xff0c;θ是指上下界相等&#xff0c;在这里&#xff0c;可以这样理解&#…

工作常用的英语

第一节 视频连接&#xff08;中文&#xff09;&#xff1a;在外企工作经常可以用上的英语表达【商务英语学习】_哔哩哔哩_bilibili 1、carry out 进行&#xff0c;开展&#xff0c;执行 eg. 1&#xff09;We need to carry out this work as soon as possible. 我们需要尽快…

【软件测试】软件测试工程师需要掌握的非测试知识有哪些

一个优秀的测试工程师&#xff0c;必须具备宽广的知识面&#xff0c;才能设计出有的放矢的测试用例&#xff0c;保证整个软件产品的质量。除了测试专业知识外&#xff0c;你还要掌握哪些知识&#xff0c;才能一路披荆斩棘&#xff0c;成长为一名优秀的测试工程师&#xff0c;或…

如何清除快速访问

如何清除快速访问 手动清除快速访问项打开注册表编辑器&#xff1a;按 Windows 键 R 打开运行对话框&#xff0c;输入 regedit&#xff0c;然后按 Enter。使用命令提示符 手动清除快速访问项 打开文件资源管理器&#xff1a;按 Windows 键 E。 访问快速访问&#xff1a;点击…

sqlite插入语句id自增列问题

sqlite给主键id设置AUTOINCREMENT自增在插入数据的时候报错table has x columns but x-1 values were supplied 为什么自增列要显示不提供,sqlite需要提供自增列table ResTools has 7 columns but 6 values were supplied SQL Statement:insert into ResTools values(管理系统w…

6.综合案例

1. 需求描述 1.1 显示所有员工信息 URI:emps 请求方式:GET 显示效果 1.2 添加操作- 去往添加页面 显示添加页面: URI:emp 请求方式:GET 显示效果 1.3 添加操作- 添加员工 添加员工信息: URI:emp 请求方式:POST 显示效果:完成添加, 重定向到 list 页面。 1.4…

【深度学习:Domain Adversarial Neural Networks (DANN) 】领域对抗神经网络简介

【深度学习&#xff1a;Domain Adversarial Neural Networks】领域对抗神经网络简介 前言领域对抗神经网络DANN 模型架构DANN 训练流程DANN示例 GPT示例 前言 领域适应&#xff08;DA&#xff09;指的是当不同数据集的输入分布发生变化&#xff08;这种变化通常被称为共变量变…

RT-Thread 内核基础(三)

程序内存分布 一般MCU包含的存储空间有&#xff1a;片内Flash与片内RAM&#xff0c;RAM相当于内存&#xff0c;Flash相当于硬盘。 编译器会将一个程序分类为好几个部分&#xff0c;分别存储在MCU不同的存储区。 Keil工程在编译完之后&#xff0c;会有相应的程序所占用的空间提…

Hive实战处理(二十三)hive整合phoenix

背景&#xff1a; 业务表使用hbase存储,使用hive整合phoenix&#xff0c;使用sql语句进行数据查询 &#xff08;如果可以的话使用网关API对外提供服务&#xff09;统一接口调用&#xff0c;查询上线比较高效。 1、hive整合phoenix的原理 Hive支持使用HDFS之外的存储系统作为底…

图灵日记之java奇妙历险记--抽象类和接口

目录 抽象类概念抽象类语法 接口概念规则使用特性实现多个接口接口的继承接口使用实例Clonable接口和深拷贝抽象类和接口的区别 Object类 抽象类 概念 在面向对象的概念中,所有对象都是通过类来描述的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够…

SD-WAN:提升连锁零售企业异地组网稳定性

连锁零售企业往往拥有众多分布在不同地区的分支机构和零售店&#xff0c;为保证企业高效运转&#xff0c;各地区之间的网络连接必须稳定可靠。但基于各地网络基础设施的不同和网络延迟、带宽等限制&#xff0c;异地组网往往并不稳定。在这背景下&#xff0c;SD-WAN成为连锁零售…