最近开发的项目 需要用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. source insight插件

    直使用sourceinsight编辑C/C++代码,sourceinsight是一个非常好用的编辑工具可以任意定位,跳转,回退,本人一直 使用该工具做C/C++开发,sourceinsight能够满足 ...

  2. 008---Django的模版层

    python的模板:HTML代码+模板语法 <!--模版语法之变量--> <h1>Index </h1> <p>{{ name }}</p> ...

  3. 17-比赛1 B - 子串计算 Chef and his string challenge (string的运用)

    Chef's best friend Jerry gives Chef a string A and wants to know the number of string A that can be ...

  4. 一个python的文件对比脚本

    脚本主要用来给游戏客户端做热更的. 处理方式就是针对每个文件求其MD5值,再根据文件的目录和名字对比两个版本的MD5值,如果不一样,则这次热更就需要更新这个文件. 用法很简单. 1,生成MD5码列表 ...

  5. 《数据结构》C++代码 BFS与DFS

    BFS,广度优先搜索,一层一层去遍历图,故称广度优先.实现方式:队列. DFS,深度优先搜索,撞墙才回头的遍历,称为深度优先.实现方式:递归(栈). 这两种遍历方式,是访问图的基本方式.如果拿树做对比 ...

  6. CodeIgniter学习笔记二:CI中的query_builder(AR)、连贯操作

    一.开启query_builder 在application\config\database.php中添加如下代码(默认已开启): $query_builder = TRUE; 二.查询数据 //ge ...

  7. python之列表/元组/字典/字符串

    一.列表 格式:list = ['xxx','xxx','xxx'] 性质:可以修改列表内容 copy用法: import copy names = ['] names01 = names #直接引用 ...

  8. SSH非交互式密码授权远程执行脚本

    公司有上百台服务器,需要为每台服务器都执行一个脚本,因为所有服务器的账号密码都是一样的,所以可以不用搭建ansible等自动化运维工具,我们直接通过SSH远程执行即可完成. 本文以三台服务器为例,系统 ...

  9. super和final关键字

    一.super关键字 super关键字的使用 JAVA类中使用super来引用父类的属性或者方法,用this来引用当前对象,主要用法: 1.子类的构造函数默认第一行会默认调用父类的无参数构造函数 2. ...

  10. Tensorflow实现LSTM识别MINIST

    import tensorflow as tf import numpy as np from tensorflow.contrib import rnn from tensorflow.exampl ...