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 的状态存 ...
随机推荐
- vbox+Vagrant 入门指南
Vagrant 简介 Vagrant 是一个用来构建和管理虚拟机环境的工具.Vagrant 有着易于使用的工作流,并且专注于自动化,降低了开发者搭建环境的时间,提高了生产力.解决了"在我的机 ...
- __builtin_popcount() 函数
详解 该函数的主要作用是计算一个数字的二进制中有多少个1,返回值就是其中1的个数. 它使用一张基于表的方法来进行位搜索,因此这个操作的执行效率很高 此处举一题 P1582 倒水 #include &l ...
- contextmanager 的基本使用
from contextlib import contextmanager 简化 With 语句: class MyResource: def query(self): print ...
- 【Java集合源码剖析】Java集合框架
Java集合工具包位于Java.util包下,包含了很多常用的数据结构,如数组.链表.栈.队列.集合.哈希表等.学习Java集合框架下大致可以分为如下五个部分:List列表.Set集合.Map映射.迭 ...
- Ubuntu设置root密码[repost]
From: http://hi.baidu.com/busybox/item/283e7d31433db7179cc65ef3 安装完Ubuntu后在终端使用命令:su -然后输入密码,总是不正确.原 ...
- 《Cracking the Coding Interview》——第18章:难题——题目8
2014-04-29 03:10 题目:给定一个长字符串S和一个词典T,进行多模式匹配,统计S中T单词出现的总个数. 解法:这是要考察面试者能不能写个AC自动机吗?对面试题来说太难了吧?我不会,所以只 ...
- Git上手:四种常见的Git协同工作方式
1.集中式工作流 适用人群:开发小团队(4-5人),习惯使用SVN工具的小团队. 工作方式:团队组长创建远程仓库,创建一个master分支,组员可读可写. 每个开发人员都git clone远程仓库到本 ...
- Kickstart配置文件解析
参考:https://www.douban.com/note/270359374/?type=likehttp://blog.51cto.com/molinux/548247http://debugo ...
- 第三节 MVC应用程序架构和测试
在查看如何测试单个功能之后,您可能会问,整个Web应用程序如何? 如前所述,有以下级别的测试: 单元测试 集成测试 功能测试 在开始编写测试时考虑这一点很重要. 可能还有其他类型的测试,但现在让我们关 ...
- ASP.NET——真假分页
所谓分页,就是把所有要显示的内容分成n多页来显示.那为什么要用分页而不直接全部显示呢?这就好比一本书,我们可以用一张纸写完全部书的内容,但实际上并不是这么做的.我们把网页分成一页一页的,其实很大程度上 ...