茶叶外贸网站建设,如果做网站赚钱,公司网站搭建费用,网站运营公司文章目录前言State和Mutations基础简化gettersMutationsActions#xff08;异步#xff09;Module总结前言 作为一个没啥前端基础#xff08;就是那种跳过js直接学vue的那种。。。#xff09;的后端选手。按照自己的思路总结了一下对VueX的理解。大佬勿喷qAq。 首先我们需要…
文章目录前言State和Mutations基础简化gettersMutationsActions异步Module总结前言 作为一个没啥前端基础就是那种跳过js直接学vue的那种。。。的后端选手。按照自己的思路总结了一下对VueX的理解。大佬勿喷qAq。 首先我们需要明确一个点引入VueX的使用只是用来保存和操作全局变量的。类似于后端用ThreadLocal来保存当前线程的变量 相关链接Vue官网 首先我们先来了解VueX当中的五个属性对于快速入门的选手而言我们只需要了解前四个属性就好了然后优先了解其中的Satae和Mutation就行 这里先扔一张图就是混个眼熟后面会再提到 State和Mutations
基础 State就是用来保存全局变量的值的比如我们可以往里面定义值 Mutations就是用来改变state当中定义的值的我们可以往里面定义方法来改变state的值 下面在State当中定义了一个变量count,在Mutations当中定义了一个方法increment()对state当中的变量count进行1操作 这里的this.store理解为固定写法如果我们要使用VueX的相关操作的话就要先写上this.$store。 我们用this.$store.state.count直接获取到了state当中count属性的值然后写了个按钮调用add()方法. 在add()方法中。我们要调用Mutations的increment方法我们就使用this.$store的.commit(“increment”方法传入的increment参数就是Mutations的increment()方法 点击一下数字1 当然也可以传参比如每次2 简化
你可以类比后端的lambda表达式来简化操作。看不懂就算了记住可以这么写就行。 1、我们使用计算表达式computed定义一个count()方法替代{{this.$store.state.count}}这一串 2、可以使用mapState进一步简化computed 简化的代码看不懂没关系记住就这么写就行。QwQ 入门的话看完上面两个就行了接下来两个属性都用最简化的方式了因为可以少写代码只要记住这种写法就行别问为啥 getters getters可以理解为对state里的值做预处理下面当中的getters就是对todos列表做了个过滤(done为true) 下面在state当中又定义了一个列表todos现在一共两个全局变量了。count和todos先看上面四个箭头我们用…mapState直接把全局变量展示到了页面。 而下面两个箭头左边在getters里我们用doneTodos方法预处理了一下state里的todos列表只要done为true的然后右边箭头我们用…mapgetters获取了getters预处理后的结果 运行结果如下 Mutations 不知道刚刚的简化有没有看懂看懂的话你就会发现state有 …mapStategetters有…mapGetters那么mutations有没有…mapMutations呢也是有的因此我们再来简化。 注意我把原来的写法注释掉了现在看看框起来的两部分是不是很类似也很简洁。 Actions异步 例如这张图值得注意的一点是我们是通过Mutations来改变state的值因此使用Actions来commit到Mutations然后在Mutations里面修改stated的值。 还有一点是同步是用this.store.commit而异步是用this.store.commit而异步是用 this.store.commit而异步是用this.store.dispatch Module
这个可参考我的另一篇文章若依项目学习23前后端分离版——前端登录整体数据流程分析Vue2
总结
我们在回来看这张图组件可以获取state的值(全局变量)但是想要修改值时需要通过Actions异步也是通过Mutations来修改state的值要先commit到MutationsMutations同步修改state的值。当然可以通过getters获取预处理过的state里的值全局变量
