在vue1.0遇到vuex和v-model的坑

最新推荐文章于 2023-10-08 15:54:46 发布
最新推荐文章于 2023-10-08 15:54:46 发布
阅读量95 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/longsiyuan/p/6252048.html
在使用Vue.js框架开发过程中，遇到组件中的数据与Vuex中的数据意外同步的问题。当组件中的数据对象与Vuex中定义的数据对象字段名一致时，通过v-model绑定的数据会直接修改Vuex的状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

事情是这样的，在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象

        userInfo : {
                    'nickName' : '',          // 昵称
                    'password' :'',           // 是否有密码
                    'gender' : '',            // 性别
                    'avatar' : '',            // 头像
                    'userAccount' : '',       // 账号
                    'birthday' : '',          // 出生日期
                    'cityName' : '',          // 城市
                    'email' : '',             // 邮箱
                    'mobile' : '',            // 手机号
                    'userId' : ''             // 用户id
                }

然后在组件中也定义了一个一毛一样的对象完全一样，这样做是为了方便去store中用getter取值

this.userInfo = this.ache_getUserInfo;

现在我在这个组件中使用v-model绑定了 userInfo.nickName这个值，神奇的事情发生了，我input框输入值的时候，store里面的值也会随改变！

但是如果我的这个组件中的参数名和store中的不一样，就不会发生这种情况，比如我把nickName改为comNickName，然后在组件中绑定userInfo.comNickName就不会，也就是说组件中v-model绑定的值和vuex的store中的名字一样，那么他会影响store中的值。

=_=!!汗

转载于:https://www.cnblogs.com/longsiyuan/p/6252048.html

VUE面试题（3）--vue常见面试题
MingL520的博客
05-21 736
除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。
当 Vuex 遇上 v-mdel
qq_45050686的博客
11-22 515
vuex、v-model
【Vue1.0】——Vuex1.0使用教程（简单并附代码）
weixin_34235105的博客
03-28 181
作用 我理解的vuex是用来管理vue的全局变量的，并且可以数据实时更新 安装 先看一下你用的vue是哪个版本，安装对应的vuex，因我之前使用的vue1.0，所以安装的vuex1.0 在当前项目文件夹npm install vuex@1.0 代码 在app文件夹下建vuex文件夹，文件夹内包括两个文件：store.js和actions....
在Vue中v-model如何和Vuex结合起来
m0_63327154的博客
05-23 351
<input v-model="getVal" /> computed: { getVal: { get() { // 这里也是用了Vuex里的 modules 大家可以当成普通的变量来看 return this.$store.state.Root.value }, set(newVal) { this.$store.commit('handleVal...
vueX学习1.0vuex的使用方法 白话解释（会这些就够了）
weixin_43989837的博客
07-28 204
一，大概构架。 strore对象中包含以下属性以及方法： –state，存在的状态，这里是存放数据的，所有的数据都在这里存放。（个人理解为全局变量）。 –getters，用来获取state中的数据。 –mutation，用来更新状态的一些逻辑写在这里，虽然一些js逻辑在他里面，但是你不能直接操纵mutation，但是可以通过actions操控他。（个人理解就像是一个函数容器，跟methods相似） –actions，actions操控mutation。同步用conmit，异步用dispatch； –modu
当v-model遇上vuex时报错
cyyy1223的博客
08-09 3463
场景：当我们v-model的数据是存储在vuex中时写法如下时会报错 computed:{ editableTabsValue2:{ return this.$store.state.activeName } } 报错：Computed property  "editableTabsValue2"  was assigned  to but  it has no  sett...
Vue的传值方式（二）——双向数据绑定【v-model】
weixin_42459638的博客
07-18 667
原理 采用数据劫持结合发布者-订阅者模式的方式，通过**Object.defineProperty（）**来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。 vue
Vue.js 1.0 笔记本应用开发：vue-memo 实现解析
- **Vue.js指令和API**：例如使用v-model实现双向绑定，v-for渲染列表，以及使用methods、computed、watch等选项实现逻辑处理。 - **构建工具**：早期的Vue项目可能使用了Webpack、Gulp或Grunt等构建工具进行模块...
深度解析Vue：掌握v-model动态绑定与数据流管理的终极策略
[深度解析Vue：掌握v-model动态绑定与数据流管理的终极策略](https://img-blog.csdnimg.cn/4445cc963f1f478283a2b4c38ab58f42.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YCN...
2. vue3从零搭建项目 - 项目整体框架定位
最新发布
weixin_55555471的博客
10-08 170
2. 修改router文件，增加login路由 3. 本地运行，打开页面查看效果 先去网上下载一个不要钱的svg文件，然后放到 public文件夹下面 文字更改，需要在package.json文件中更改name值 4.2 login页面优化 5. 最后效果
Vuex 使用 v-model 配合 state的方法
10-17
主要介绍了Vuex 使用 v-model 配合 state的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue：表单双绑、组件
希望有点用
09-02 473
Vue：表单双绑、组件
Vuex使用和v-model语法详细教程
idiot_MAN的博客
09-29 1533
/ 初始化vuex对象state: {// 管理数据count: 0,},})如何在组件中获取count？state: {// 管理数据},// d定义mutations}})mutations是一个对象，对象中存放修改state的方法// 方法里的参数 第一个参数是当前store的state属性// 第二个参数payload 运输参数 调用mutations的时候 可以传递参数},},},如何在组件中调用mutations？actions: {
v-model绑定vuex的state
cccbbbmmm的博客
08-25 728
第一种方法：直接 给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法通过 commit 方法委派给 mutation 执行来修改 Vuex 中的数据。在Vue中，我们可以使用"v-model"指令将表单元素的值和Vue实例的数据进行双向绑定。在计算属性或者方法中使用Vuex的commit方法或者dispatch方法来触发相关的mutations或者actions。在组件中使用计算属性或者方法，将本地的data属性和Vuex的state进行关联。
vue中element的去重校验
lmh19921116的博客
07-08 797
需要校验的表单项需要有prop属性，和:error属性 <el-form-item label="昵称" prop="nickName” :error="errorMsg"> <el-input v-model="userInfo.nickName" @change="duplication"/> </el-form-item> data: { errorMsg: '' }, computed: { ...mapGetters([ 'userId' ])
（一）：vue3.x初探之v-model的详细使用
qq_45279574的博客
05-12 469
1.用于自定义组件时，v-model的prop和默认事件名更改了，并且移除了model选项 //父组件 <template> <div> <Child v-model="message" /> <div>绑定的值：{{message}}</div> </div> </template> //子组件 <template> <div> <input
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值