最近开发的项目 需要用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. lan口和wan口的配置

    路由器的一排网线接口,分为 lan 和 wan .但不是谁生来就是lan口 或者 wan口 . 也没有谁规定就一个wan口 就只有一个. 网口就是网口, 决定它是 lan口 还是 wan口 ,是由我们 ...

  2. POJ:3185-The Water Bowls(枚举反转)

    The Water Bowls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7402 Accepted: 2927 Descr ...

  3. git的使用入门

    写作目的: 快速的上手git版本控制+github神器进行基本的版本同步操作. 怎么做? 对于任意一个代码项目,使用git_bash进入到代码目录 如果没有进行过初始化操作:应当使用git init  ...

  4. 第三章:Web表单

    感谢作者 –> 原文链接 本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你 ...

  5. android 获取图片

    Android获取手机或者内存卡里面的图片有两种方式 1.这是通过一种action Intent intent=new Intent(); intent.setAction(Intent.ACTION ...

  6. Android通过用代码画虚线椭圆边框背景来学习一下shape的用法

    在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,在使用的时候将控件比如imageview或textview ...

  7. ERC720和erc721的区别

    有一阵子,Ethereum网络突然变的特别拥堵,原因是兴起了一款以太坊养猫的Dapp游戏,超级可爱的猫形象,再加上配种,繁殖和拍卖等丰富的玩法,风靡了币圈. 一时间币圈大大小小的人都在撸猫,以太坊网络 ...

  8. 原始套接字--traceroute

    traceroute, 也就是 trace route,跟踪路由.这个程序最早是Van Jacobson实现的.源码在网上可以找到,不过我还没有去找.是IP路由过程中对数据包TTL(Time to L ...

  9. nyoj 题目 孪生素数问题

    孪生素数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 写一个程序,找出给出素数范围内的所有孪生素数的组数.一般来说,孪生素数就是指两个素数距离为2,近的不能再 ...

  10. kvm搭建完成了,那么问题来了,到底是什么原理

    kvm中到底是怎么模拟的CPU和内存? 收到了大量的 这里有一个裸的调用kvm接口的实例,超赞: http://www.cnblogs.com/Bozh/p/5753379.html 使用kvm的AP ...