草庐IT

Vuex 学习

小破程序员 2023-04-07 原文
  1. 什么是vuex：

    专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
     
  2. 原理图


     
  3. 安装使用vuex

    注意：vue2.0 对应  vuex3.0，vue3.0 对应vuex4.0，如果版本选中错误就会报错

    npm i vuex，如果用的是vue2.0 需要指定版本， npm i vuex@3  ,如果不指定版本，默认下载vuex4

    vuex 的actions、mutations 、state并不是自己管理的，而是交给store管理的，当引入并

    使用了vuex后，vm的对象上就会多了一个store属性。这个store 是一个js文件，并不是官方

    提供的，而是自己创建的，store的代码如下：/store/index.js



    注意引入和使用 vuex的操作是在  store/index.js中完成的，是因为vuex的使用必须在 生成store实例之前，在此处引入并使用vuex后，在main.js中引入store即可，然后创建的时候，传入store配置项



    这样，vuex的开发环境就搭建好了
     
  4. vuex的执行顺序是，this.$store.dispatch()触发 actions中的方法，acitons中的方法触发mutations中的方法，mutations中的方法操作state中的数据。

    例如，如下代码





    通过this.$store.dispatch('add',this.n) 触发 actions中的 add方法，dispatch的第一个参数为actions中的方法名，第二个参数为实际传的值，add方法的第一个参数是

    context，第二个参数是实际传过来的值。 context 通过调用 commit 方法，触发mutations中的ADD方法，其中，commit方法中，第一个参数为  mutations中的方法名ADD,第二个参数为传递的值，ADD 也有两个参数，第一个参数为state，可以直接操作state中的数据，第二个参数为传过来的值。

    也可以通过commit方法直接调用 mutations中的方法



    页面展示state中的数据：


     
  5. getters 配置项：

    是vuex新增的配置项，首先定义getters对象，然后在store中进行配置



    里面有一个方法，是自定义的，参数就是 state，方法需要返回值

    组件中显示getters中的返回值：


     
  6. 4个map方法的使用：

    4个map方法分别是，mapState、mapGetters、mapActions和mapMutations

    为什么要使用这几个方法，是为了简化代码的写法，目前从state和getters中取数据都是通过

    {{$store.state.sum}} 和{{$store.state.bigSum}}这种方式，模板中尽量使用简单的表达式，所

    以可以改为在计算属性中返回值



    模板中直接调用计算属性的方法名取值即可，



    如果state中的属性较多，就需要一个一个的写计算方法，所以可以通过vuex的map方法帮我们去映射store中的属性和方法

    首先需要引入

    import {mapState,mapGetters} from vuex



    对象写法中的每一个对象的第一个参数对应计算属性中的方法名，可以不加引号，在模板调用时使用，第二个参数对应state中的属性，必须加 引号 ，数组写法，每个元素对应state中的属性，必须加 引号，模板解析时，直接 {{sum}}  和{{school}} 即可。前面的 三个点必须加，这是因为mapState返回的是一个对象，对象里面的本质是一个个函数，所以需要将mapState进行拆包，否则会报错。

    mapGetters同理，对应的是getters中的函数



    mapActions和mapMutations 用于帮我们生成和  actions和mutations对话的方法，

    要使用的话，首先先引入

    import {mapActions,mapMutations} from vuex

    这里只介绍mapMutations的写法，mapActions同理。如下图的三种写法，效果是一样的



    亲自的写法，在调用的时候，是不需要传参的，直接调用方法名即可，参数在commit的时候再传入，如下图所示



    mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。 



    ADD对应  mutations中的方法

 

 

 

 

 

 

 

 

 

 

 

 

Vuex学习xff0cxff0xffvue.js前端

有关Vuex 学习的更多相关文章

  1. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  2. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  5. ruby - 我如何学习 ruby​​ 的正则表达式？ - 2

    如何学习ruby​​的正则表达式？(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具，因为它可以立即将结果可视化。 关于ruby-我如何学习ruby​​的正则表达式？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1881231/

  6. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG

  7. 机器学习——时间序列ARIMA模型(四)：自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式：ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵，分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型，求出其滞

  8. Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c

  9. ruby-on-rails - 这个 C 和 PHP 程序员如何学习 Ruby 和 Rails？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我来自C、php和bash背景，很容易学习，因为它们都有相同的C结构，我可以将其与我已经知道的联系起来。然后2年前我学了Python并且学得很好，Python对我来说比Ruby更容易学。然后从去年开始，我一直在尝试学习Ruby，然后是Rails，我承认，直到现在我还是学不会，讽刺的是那些打着简单易学的烙印，但是对于我这样一个老练的程序员来说，我只是无法将它

  10. jquery - 使用 Rails 3 学习 Ajax 的资源 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。有没有学习Ajax(jQuery)和Rails3的好资源？

随机推荐