Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >双向绑定和 vuex 是否冲突

双向绑定和 vuex 是否冲突

作者头像
刘嘿哈
发布于 2022-10-25 06:18:05
发布于 2022-10-25 06:18:05
32700
代码可运行
举报
文章被收录于专栏:js笔记js笔记
运行总次数:0
代码可运行

在严格模式中使用Vuex,当用户输入时,v-model会试图直接修改属性值,但这个修改不是在mutation中修改的,所以会抛出一个错误。当需要在组件中使用vuex中的state时, 使用带有setter的双向绑定计算属性。见以下例子(来自官方文档):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//template
<input v-model="message">
//scripte
{
 //...其他options
  computed: {
    message: {
      get() {
        return;
        this.$store.state.obj.message;
      },
      set(value) {
        this.$store.commit("updateMessage", value);
      },
    },
  },
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vuex 进阶
Vuex 是 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
FoamValue
2022/08/22
3890
Vuex 和 v-model 的水乳交融
对于 v-model 常用的场景,就是表单的输入输出,通常可以定义为一种同步的数据变更,即采用 commit / mutations 的方式。
kyrieliu
2020/07/01
9620
Vuex详细介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这是官网的说法,其实很简单:就是一个加强版的data! 在单页应用中会有一个data函数,里面就存放了当前页面的一些数据。比如:
从入门到进错门
2019/06/11
1K0
10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数
可以将所有的Mutation事件,写入到一个单独的文件中,然后通过常量来替代,可以方便开发者对项目中所有Mutation
全栈程序员站长
2022/09/01
1.3K0
vuex
问题1:通过路由传递参数,我们会采用params或者query形式,但这两种方式都会在URL上做手脚,如果传递的参数过多,会导致400 Bad Request(如,点击表格某行,携带行数据跳转到新页面进行查看)。 问题2:兄弟组件传值 问题3:多处地方使用同一数据,为节省重复请求(最为常见)
奋飛
2019/08/14
3K0
vue2.x入坑总结—回顾对比angularJS/React的一统
从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑。
周陆军
2018/08/03
1.3K0
Vue基础知识巩固之全面了解Vuex,比官方更易懂(下)
前面我们说了,在组件用访问store实例中的值时我们可以使用computed计算属性,如果我们访问某一个值还好,但是如果我们需要访问多个值时,就需要在computed中写多个计算属性,这样既不省事也不优雅,对于这样的情况,Vuex为我们准备了辅助函数。
十里青山
2022/08/07
7270
Vue基础知识巩固之全面了解Vuex,比官方更易懂(下)
假如用王者荣耀的方式学习Vuex
维佑·爱克斯是鲁班大师创造出来的三代机器人,目前负责稷下学院负责学院物资分配工作,他采用集中式存储管理着学院的所有的物资,并以相应的规则保证物资以一种可预测的方式发生变化。
李文杨
2020/05/08
5480
Vue学习-Vuex
简单理解:不同的组件需要访问一些同一状态量,如果把这些状态量随意定义到任意组件中都不合适,我们希望能够有一个对象对这些共享状态量进行统一封装,而Vuex就是这样一个提供在多个组件间共享状态的插件。
花猪
2022/02/17
2K0
Vue学习-Vuex
Vuex 基础用法
Vuex 是专为 Vue.js 开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态可预测的方式发生变化
Cellinlab
2023/05/17
2560
Vuex 基础用法
Vuex
在相对独立的组件中,action -> state -> view的单向数据流能得到保证。而真实业务场景经常需要状态传递及共享,一般方法是:
ayqy贾杰
2019/06/12
1.2K0
你不知道的React 和 Vue 的20个区别【源码层面】
面试竞争力越来越大,是时候撸一波Vue和React源码啦; 本文从20个层面来对比Vue和React的源码区别; 文章源码:请戳,原创码字不易,欢迎star!
火狼1
2020/07/08
1.6K0
你不知道的React 和 Vue 的20个区别【源码层面】
vuex-4.0.0-alpha.1 体验
新的vuex 基础使用及api 没要太大变化, 调用方式更灵活. 但在当前的新的vue 版本下, vuex 存在的意义不大.
copy_left
2020/04/24
2.4K2
Vuex的五个核心属性
Vue有五个核心概念,state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。
不愿意做鱼的小鲸鱼
2022/09/24
5130
Vue基础知识巩固之全面了解Vuex,比官方更易懂(上)
写项目很久了,偶尔用到Vuex也是用一些很浅显的功能,就是简单的存储一下用户信息,用的时候取一下,很少深入的使用,现在静下心来想给自己写个项目,在写的过程中,顺便把以往忽略的基础知识学习巩固一下,这篇文章就是记录一下学习Vuex的知识,既然是巩固知识,那那些基础的就直接一笔带过了。
十里青山
2022/08/07
8300
Vue基础知识巩固之全面了解Vuex,比官方更易懂(上)
浅析Vuex及相关面试题答案
自从学习了Vue框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少的的疑惑或不解,这篇文章就针对vuex原理进行研究,希望能帮助到大家,如果有不准确的地方,大家多多指教。。。
前端开发博客
2020/11/04
1.1K0
浅析Vuex及相关面试题答案
vuex(用了vue就上了一条不归路的贼船)
“杀鸡不用宰牛刀”。对于简单的项目,根本用不着Vuex这把“宰牛刀”。那简单的项目用什么呢?用Vue.js官方提供的事件总线就可以了。
landv
2019/07/02
3.4K0
组件通信解决办法之vuex
vuex实现组件全局通信,不用像以前那样子组件要不断找父组件,找爷爷,找祖先..... 通过vuex可实现数据跨组件共享,防止数据意外修改,调试方便 摘自官方的图片
切图仔
2022/09/08
4710
组件通信解决办法之vuex
Vue常见面试题汇总
MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
物流IT圈
2019/07/16
1.3K0
vuex入门学习笔记
我们需要解决多个组件间的数据通信和状态管理就显得难以维护的问题,在vue中用的是vuex,在react中用的是redux.通过本篇教程将基本熟悉它的所有常用用法以及注意事项。
RobinsonZhang
2018/08/28
9080
vuex入门学习笔记
相关推荐
Vuex 进阶
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验