vuex的mutations传值
mutations是要通过方法触发的,用于更改store里的数据的。
this.$store.commit("mutationsName")
例子:
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
prod :[
{name:"zs",age:12},
{name:"ls",age:13},
{name:"ww",age:14},
]
},
getters:{
getValue(state){
var item = state.prod.map(ele=>{
return {
name:ele.name+"__技术部",
age:ele.age+10
}
})
return item ;
}
},
mutations:{
getVal(state){
var items = state.prod.map(ele=>{
return {
age:ele.age+=4
}
})
return items;
}
}
})
Home.vue
<template>
<div>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,i) in getValue">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table> <hr>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,i) in getVal">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table> <button @click="getMutaions()">加4</button>
</div>
</template>
<script>
export default {
name: "Home",
data () {
return {
};
},
methods:{
getMutaions(){
this.$store.commit("getVal"); // 这里不用return的
}
},
computed:{
getValue(){
return this.$store.state.prod
},
getVal(){
return this.$store.getters.getValue
}
}
}
</script>
<style lang="css" scoped>
</style>
vuex的mutations传值的更多相关文章
- 在vuex的mutations中使用vue的小技巧
问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...
- vuex 子组件传值
以下是基础的使用方法,详细且深入使用方法详细见博客:https://segmentfault.com/a/1190000015782272 Vuex官网地址:https://vuex.vuejs.or ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- vuex中mutations与actions的区别
要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...
- vuex的mutations如何传多个传参?
1.不传参时的写法(官网例子): const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) ...
- vuex中mutations数据响应
vuex中的mutation需遵守Vue的响应规则: 既然Vuex的store中的状态是响应式的,那么在我们变更状态时,监视状态的Vuex最好在state中初始化好所有的所需属性. 如果需要在对象上添 ...
- vue:vuex详解
一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- vue学习记录:vue引入,validator验证,数据信息,vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
随机推荐
- Linux网络编程学习(八) ----- 文件和记录锁定(第四章)
1.什么是文件和记录锁定? 文件锁定的是整个文件,而记录锁定只锁定文件的一部分,文件和记录锁分为咨询式锁定和强制锁定 1)咨询式锁定 某个进程对某个文件进行了咨询式锁定,其他想访问该文件的进程将会被操 ...
- Redis阻塞诊断基础
slowlog Redis慢查询 slowlog 参数 slowlog-log-slower-than: 慢查询时间阈值,超过这个阈值的查询将会被记录,默认值10000,但是微妙,也即10毫秒. sl ...
- linux上部署jenkins步骤小记
一.部署jdk环境 1.下载jdk包,解压,放在选定的位置,我本次jdk包放置在“/usr/local/java/jdk” 目录下 2.配置环境变量 1)打开/etc/profile文件,在命令框中输 ...
- IDEAL启动项目的时候报java.lang.NoClassDefFoundError: javax/servlet/Filter错误
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- EOSIO/appbase
[EOSIO/appbase] AppBase是EOSIO开源一个plugins架构程序框架,被应用于 EOS nodeos中.AppBase manages the plugin life-cycl ...
- Idea书签管理器的使用
1. 添加书签 以光标所在的行,为落点, 方式一: F11 , 添加一个默认的书签 方式二:Crtl + Shift + 数字 , 添加一个带编号 的书签 2. 查看书签 方式一:Shift + F1 ...
- JS工具类
封装了开发中常用的操作 并添加了一些扩展方法供调用 var util = { //获取Url中的参数(不支持中文) getParams: function() { var url = location ...
- 走进MyBatis的世界
1.MyBatis可框架及ORM 1.Mybatis框架简介 MyBatis是一个开源的数据持久层框架.它内部封装了通过了JDBC访问数据库的操作,支持普通的SQL查询,存储过程和高级映射,几乎消除了 ...
- Python CGI编程
CGI(Common Gateway Interface)通用网关接口,它是一段程序,运行在服务器上.如:HTTP服务器,提供同客户端HTML页面的接口. CGI程序可以是python脚本,PERL脚 ...
- sql yog出现2013错误
首先用telnet检查一下你的防火墙端口,如果连接失败,配置防火墙. 配置防火墙,开启3306端口 find -name iptables vim /etc/sysconfig/iptables -A ...