首页 技术 正文
技术 2022年11月10日
0 收藏 958 点赞 3,056 浏览 1667 个字

网上也很多文章,但解释起来的确玄乎,小白们很难理解到位。

自问文笔没大神们好只是自己了解了掌握了Vuex用法以及主要思路

但要我解释起来也只能参考大神们的说法

Vuex就是一个全局变量,而这个全局变量增删改查都有自己一套方法,

这样做的好处就是大团队多人协作不容易出错

Vuex小项目的确用的少,但面试基本会问到

如果面试能回答出自己对vuex的理解(并不是生搬硬套百度回来的文章)

基本可以证明对vue理解还是可以的能直接上手项目干活

// ====== (普通的分割线)  ==================

总结(各个类型的 API各司其职):mutation 只管存,你给我(dispatch)我就存;action只管中间处理,处理完我就给你,你怎么存我不管;getter 我只管取,我不改的。 action放在了 methods 里面,说明我们应该把它当成函数来用(讲道理,钩子函数也应该可以的)mutation是写在store里面的,这说明,它就是个半成品,中间量,我们不应该在外面去操作它。getter写在了 computed 里面,这说明虽然 getter我们写的是函数,但是我们应该把它当成计算属性来用。 这些方法都放在store.js文件里四大方法:state、mutations、getters、action 辅助函数是个什么鬼?简化vuex自带方法(构造器选项)的写法辅助函数要配合ES6的扩展运算符使用 vue的Vuex

// ====== state(仓库) ============辅助函数:mapState存放全局参数(存放组件之间共享的数据) vue的Vuex

vue的Vuex

 // ====== mutations(改变) ============辅助函数:mapMutations我们要改变 state 的数值的方法,必须写在 mutation 里就可以了 虽然mutations也能异步,但真的不赞成在里面写,在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念(一句话反正别在mutations执行异步操作就得了)  vue的Vuex

vue的Vuex

// ====== Action(异步) ============1.Action 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过mutations,让mutations帮他提交数据的变更。2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下 虽然mutations也能异步,但真的不赞成在里面写,在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念(一句话反正别在mutations执行异步操作就得了) vue的Vuex

// ====== getters(过滤器) ============辅助函数:mapGetters;当前组件如果只读取就不用写这个实时计算,里面的值无论在哪只要被被改变都会立刻触发下面的方法getters里面的方法操作的变量不能重复,不然报错简单说两个方法不能操作同一个变量方法名要跟return变量名一样 vue的Vuex

看到这里Vuex的基本增删改查代码贴完了,掌握了基本增删改查后进阶就是module(模块)了。项目一大Vuex全局变量就变多了,这时候就应该module出现让Vuex全局变量能更分散分享两个我看过个人觉得写得不错的文章https://www.cnblogs.com/mmykdbc/p/8968266.htmlhttps://www.jianshu.com/p/c91ee3d59453  后话:  Vuex需要一套方法来控制它自己的全局变量,这套方法虽然有点绕,但理解了就觉得不难了  module部分代码我还没写,虽然有点烂尾的感觉,但其实Vuex的基本增删改查掌握了,module也不难了           

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,492
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,132
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,295