vue v-model 与 vuex state数据绑定问题
最近开发的项目 需要用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数据绑定问题的更多相关文章
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...
- vue自学入门-5(vuex state)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...
- vue实例讲解之vuex的使用
vuex是一个状态管理插件,本文通过一个简单的实例来讲解一下,vuex的使用. 先看一张官方的图: 这个图新手一看估计是蒙的,简单解释一下,这个图表示的就是vue通过Action Mutations ...
- vue创建状态管理(vuex的store机制)
1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...
- Vue之状态管理(vuex)与接口调用
Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...
- [vue]初探vue生态核心插件Vuex
为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...
- vue组件通信传值——Vuex
一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...
- vue(22)Vuex的安装与使用
前言 每一个 Vuex 应用的核心就是 store(仓库).store基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存 ...
随机推荐
- 插入排序算法Java实现
一. 算法描述 插入即表示将一个新的数据插入到一个有序数组中,并继续保持有序.例如有一个长度为N的无序数组,进行N-1次的插入即能完成排序:第一次,数组第1个数认为是有序的数组,将数组第二个元素插入仅 ...
- 第一章 UNIX 基础知识
1.1 Unix体系结构 OS定义为一种软件,它控制计算机硬件资源,提供程序运行环境,一般称其为内核(kernel),它体积小,位于环境中心. 内核的接口为系统调用(system call),共用函数 ...
- python面向对象的约束和自定义异常
基于人为来约束: 即人为主动抛出异常 class BaseMessage(object): def send(self,x1): """ 必须继承BaseMessage, ...
- P1875 佳佳的魔法药水
P1875 佳佳的魔法药水 题目描述 发完了 k 张照片,佳佳却得到了一个坏消息:他的 MM 得病了!佳佳和大家一样焦急 万分!治好 MM 的病只有一种办法,那就是传说中的 0 号药水 ……怎么样才能 ...
- Pycharm设置Python的路径
1. 打开文件->默认设置 2. 找到Python的路径即可,如果没有的话,这里也可以安装一个,只是时间比较久. 3. 选择本地 4. 选择文件
- 常用数据库连接URL地址大全
1.Oracle8/8i/9i数据库(thin模式) Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); ...
- USACO Section2.1 Ordered Fractions 解题报告
frac1解题报告 —— icedream61 博客园(转载请注明出处)---------------------------------------------------------------- ...
- linux驱动学习_1
目前项目需要,需要做linux驱动了,记录一下 学习驱动,大家一定都会写一个hello world代码,网上也有很多范例,但是记录一下遇到的问题. 1.make之后,使用insmod加载,终端没有打印 ...
- python使用工具简介介绍
我从研究生开学以来就开始在学python,现在来简单分享下一些基本的使用命令和快捷方式 Pycharm: 运行程序 ctrl+alt+F10 删除一行ctrl+D 注释ctrl+/ 安装python所 ...
- 设置EntityFramework中decimal类型数据精度问题(EF默认将只会保留到2为精度)
原文:设置EntityFramework中decimal类型数据精度 EF中默认的decimal数据精度为两位数,当我们数据库设置的精度大于2时,EF将只会保留到2为精度. e.g. .19990将会 ...