最近开发的项目 需要用input 的v-model 直接绑定到vuex的store数据 因为v-model 能与data的数据绑定 尝试了半天

代码如下

<template>
<div>
<el-row class="age">
<el-col :span="3">
<div class="el-input__inner agestart">
<el-checkbox v-model="changeValue">年龄</el-checkbox>
</div>
</el-col>
<el-col :span="4">
<el-input type="number" v-model="content" placeholder="开始年龄"></el-input>
</el-col>
<el-col :span="2">
<div class="el-input__inner ageto">
to
</div>
</el-col>
<el-col :span="4">
<el-input type="number" v-model="contentend" placeholder="结束年龄"></el-input>
</el-col>
</el-row>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:'Age',
computed:{
changeValue:{
get(){
return this.$store.state.changeValue
},
set(v){
this.$store.dispatch("changeMy",v)
}
},
content:{
get(){
return this.$store.state.startAge
},
set(v){
this.$store.dispatch('changeMoney',v)
}
},
contentend:{
get(){
return this.$store.state.endAge
},
set(v){
this.$store.dispatch('changeEndAge',v)
}
}
}
}
</script>
<style lang="stylus"> </style>

记录下备忘

vue v-model 与 vuex state数据绑定问题的更多相关文章

  1. 在vue组件中使用vuex的state状态对象的5种方式

    下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...

  2. vue自学入门-5(vuex state)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  3. vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题

    简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...

  4. vue实例讲解之vuex的使用

    vuex是一个状态管理插件,本文通过一个简单的实例来讲解一下,vuex的使用. 先看一张官方的图: 这个图新手一看估计是蒙的,简单解释一下,这个图表示的就是vue通过Action Mutations ...

  5. vue创建状态管理(vuex的store机制)

    1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...

  6. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

  7. [vue]初探vue生态核心插件Vuex

    为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...

  8. vue组件通信传值——Vuex

    一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...

  9. vue(22)Vuex的安装与使用

    前言 每一个 Vuex 应用的核心就是 store(仓库).store基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存 ...

随机推荐

  1. PHP 防止 E-mail 注入( PHP 过滤器)

    PHP 防止 E-mail 注入 防止 e-mail 注入的最好方法是对输入进行验证. 下面的代码与上一节类似,不过我们已经增加了检测表单中 email 字段的输入验证程序: <html> ...

  2. linux基础命令3(man)

    Type:显示指定的命令是那种类型.                                            Linux下有两种模式的时间 date:用于系统时间管理.(软件操作的系统时 ...

  3. HyperLedger Fabric 1.4 比特币历史(1.1)

    比特币是一种数字货币,也是一种创新思维,把人们带入到一个无中心化.完全可信任.安全可靠的全新思维领域:一个叫“中本聪”的人或组织,使我们思维产生化学反应,他在2008年10月31日发表了比特币白皮书& ...

  4. Androd安全——混淆技术完全解析

    .前言 在上一篇Androd安全--反编译技术完全解析中介绍了反编译方面的知识,因此我们认识到为了安全我们需要对代码进行混淆. 混淆代码并不是让代码无法被反编译,而是将代码中的类.方法.变量等信息进行 ...

  5. Idea中maven依赖图查看

    技术交流群: 233513714 使用Intellij idea,想看看它的maven依赖图,根据eclipse的经验,不是很容易能找到Intellij idea对应的功能.在打开的pom.xml文件 ...

  6. java面试二

    技术交流群: 233513714 126.什么是ORM?答:对象关系映射(Object-Relational Mapping,简称ORM)是一种为了解决程序的面向对象模型与数据库的关系模型互不匹配问题 ...

  7. oracle(sql)基础篇系列(三)——数据维护语句、数据定义语句、伪列

    DML语句 insert 向表中插入新的记录 --三种插入方式 --(1)不写字段的名字,直接按照字段的顺序把值逐个往里插 insert into dept2 values(50,'DANAME',' ...

  8. 剑指Offer - 九度1524 - 复杂链表的复制

    剑指Offer - 九度1524 - 复杂链表的复制2014-02-07 01:30 题目描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点 ...

  9. Eclipse 出现“polling news feeds”的解决办法

    小编突然心血来潮,安装了一下Java的环境,eclipse的IDE来写点Java,但是是不是出现以下的弹窗,实在是闹心,后来网上看了前辈们的解决办法,特此记录一下.如有侵权,敬请告知!!! 1. 找到 ...

  10. 聊聊、Mybatis XML

    引入相应的依赖包 <dependency><groupId>org.mybatis</groupId><artifactId>mybatis-sprin ...