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 ...
随机推荐
- ARM-start.s注释(2410Init.s)
本人只是做个笔记保存一下. 来源:http://blog.itpub.net/13771794/viewspace-478463/ ;================================= ...
- ubuntu单用户修改密码
系统版本:Ubuntu 16.04,其它版本类似. 第一步 重启 Ubuntu ,并长按shift键,进入grub菜单,上下键选择Ubuntu高级选项 第二步 上下键选择recovery mode,不 ...
- SocketIO Server
package com.fd.socketio; import org.json.JSONObject; import com.corundumstudio.socketio.AckRequest; ...
- Redis和Memchaed缓存数据查询
使用TreeNMS数据库管理工具 支持Redis和Memchaed并存同时管理维护,支持集群管理,减少运维成本,提高工作效率 自带环境,免安装.免布署,下载解压即可使用.适用于windows,Linu ...
- 将对象序列化成XML字符串
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 模拟退火算法-旅行商问题-matlab实现
整理一下数学建模会用到的算法,供比赛时候参考食用. —————————————————————————————————————————— 旅行商问题(TSP): 给定一系列城市和每对城市之间的距离,求 ...
- Python开发【第十一篇】:Python操作MySQL
本篇对于Python操作MySQL主要使用两种方式: 1.原生模块pymsql. 2.ORM框架SQLAchemy. pymsql pymsql是Python中操作MySQL的模块,其使用方法和MyS ...
- json转换对象中出现null属性的解决方法
前言:当数据进行json转换时,当属性值为null时,json解析就会中断,导致接下来的数据无法正确获取.原则上来讲服务器端发送的json字符串不允许存在属性值为空的情况,但是如果服务器端发送了nul ...
- Junit集成测试
Spring4.x高级话题(七):Spring的测试 一. 点睛 测试是开发工作中不可缺少的部分,单元测试只针对当前开发的类和方法进行测试,可以简单通过模拟依赖来实现,对运行环境没有依赖:但是仅仅单元 ...
- webpack 模块方法
1. webpack的import和export不需要引入babel 其他ES6语法需要引入babel 2. import引入export导出的模块 3. import()模块分离 低版本浏览器想使 ...