vue里store被意外修改

　　还是接着上次那个接手的项目，还是那里面的bug。还是在编辑信息的时候，用户信息是存在store里的，从个人中心页面点击编辑按钮到编辑页面，此时是正常的，但是如果在编辑页面修改了东西，没有保存，按道理来说下次进入编辑界面的时候是不应该保持上一次编辑的信息的。于是我翻看了代码里绑定数据的对象，果然，有一句代码引起了我的注意：

　　这句看似平常的一句代码，实际却“暗藏杀机”，打印了一下每次执行这句话之前infos的值，发现只要编辑了表单，store里infos的值也被改了，vue-store的官网上明确的说了，要显式的提交mutation才能改变store里的值，那为啥这个地方只是赋值给this.infos却仍然改变了store里的infos？通过了解明白了一些事情，直接赋值对象，改变这个对象，自然也是会改变父对象的值啊，这本来就是js的基础知识嘛，vue里也是允许这样的啊，所以这句代码，如果iinfos只是展示作用是没问题的，但是如果要修改编辑的话，就不能直接这样赋值了，可以使用赋值运算符[...this.$store.getters.infos]的方式，也可以更安全保险的通过

这种方式，这样是互不影响的。

　　那么问题来了，既然可以直接修改store里的值，为啥官方还是要求我们显式的mutation呢？原因是vue里隐藏的另一个问题，那就是watch不会监听到数组的一些方法，比如this.arr[0] = 2,这种情况不会监听到，也就不会触发UI更新，所以保险起见，store需要我们显式提交更改。感觉vue里各种方法和功能都是环环相扣啊！

原文地址：https://www.cnblogs.com/liuqin-always/p/12559294.html

时间： 2024-11-08 23:14:23

vue里store被意外修改的相关文章

vue里的数据

背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件组件开发)既sfc. 本文主题 vue里数据的处理 存放数据 我们先看vue里哪里能存放数据: 1.单个vue文件里.2.官方插件vuex,作为一个集中管理经常复用的数据很有用.3.直接声明在vue实例上,用$号标识. 第一种情况下存放数据对于单个文件又分这几种属性1.1 data(常规使用,默认函

《vue里用vux写移动端搭建环境》

vue里用vux写移动端搭建环境 一,序言 最近一直在看vue,越看越觉得有意思,由于工作需要,了解了一下vux,发现是个强大好用的UI组件库,以前用过vant,iview,其它的组件库目前还没发现,也还没用过,如果各位有好用的大方分享出来喔 ~    一起学习,一起进步!下面进入正题,vux的配置环境. 二,vux安装环境 1.安装vux npm install vux --save-dev ( 如果是3.0+的脚手架,那么可以直接在终端输入vue ui打开ui界面去安装依赖会更加方便!) 2

vue里面的get、post和jsonp

使用vue里面的get可以获取文件数据,当获取文件数据的使用的用法是 使用get获取php文件执行结果时就是在前面的案例的get方法中传入php文件,然后设置和php相对应的数据,如下 js代码 php代码 需要注意的是,php文件中,方括号里面的名称才是与js里面的名称一致,如图所示 post使用方法与get基本相似,就是在此基础上添加一个数据:emulateJSON: true 演示结果如下图所示 post方法的php代码 需要注意的是,粗看之下,连个php文件差异不大,但是php文件里面分

vue里操作DOM

一般来说你要在vue里操作DOM,要先在标签里加上ref="",如下: <h2 ref="s" @click="sss">Essential Links</h2> 然后在点击的事件sss写下你想要的效果代码:(注意的是上面的ref的s,要写在下面this.$refs,不要忘了) methods: { sss() { this.$refs.s.style.color = "blue"; } } 如果你想要

vue里的渲染以及computed的好处

如果vue里的某个methods函数执行,导致页面重新渲染,那么所有的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再次执行的方法定义到computed里,那么这些没有必要执行的方法就不会被渲染页面时候执行. 只有在computed函数所依赖的数据变化时候才会被执行 1 <div id="app"> 2 <div></div> 3 <p>{{num}}</p>

vue里面的v-for列表循环

列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. <li v-for="item in items">{{item.text}}</li> data:{ items:[ {text:"第一组"}, {text:"第二组"}, {text:"第三组"},

16.如何做到webpack打包vue项目后，可以修改配置文件

问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要会到前端源码,url后,在重新npm run build,然后再把整个dist再重新传到前端服务器,才可以. 解决方法: 用了generate-asset-webpack-plugin 这个插件,在webpack.prod.conf.js中去生

vue里面的Mixins（混合）

Mixins一般有两种用途:1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染.2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用.一.Mixins的基本用法我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化".代码实现过程: <!DOCTYPE html> <html lang="en"> <head&g

另一种方式实现事务码SE16里的结果集修改

注: 这种方法不同于网上流传的在调试器里修改fcode的那种解决方案. 使用场景:我们需要直接在开发系统的事务码SE16里修改某些结果集的值,但是在SE16的工具栏里看不见修改按钮: 解决方案 使用/h进入调试模式: 点击Script tab, 使用按钮"Load Script": 再点Start Script: 之后就可使用Edit icon进行编辑: 要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码: 原文地址:https://www