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传值的更多相关文章

  1. 在vuex的mutations中使用vue的小技巧

    问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...

  2. vuex 子组件传值

    以下是基础的使用方法,详细且深入使用方法详细见博客:https://segmentfault.com/a/1190000015782272 Vuex官网地址:https://vuex.vuejs.or ...

  3. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  4. vuex中mutations与actions的区别

    要执行vuex中的函数,有两种方法: 1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法 2 ...

  5. vuex的mutations如何传多个传参?

    1.不传参时的写法(官网例子): const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) ...

  6. vuex中mutations数据响应

    vuex中的mutation需遵守Vue的响应规则: 既然Vuex的store中的状态是响应式的,那么在我们变更状态时,监视状态的Vuex最好在state中初始化好所有的所需属性. 如果需要在对象上添 ...

  7. vue:vuex详解

    一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...

  8. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  9. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

随机推荐

  1. Linux 添加中文字体库,解决Java 生成中文水印不显示问题

    本机 Windows 环境测试以下代码生成中文水印完全没问题,但是发布到Linux下不显示,一开始以为是报错了没打印出来,搜索发现直接提示中文乱码的或者不显示的,才明白原来是字体库原因,于是开始解决这 ...

  2. onenet简介

    物联科技|物联网开放平台探秘之移动OneNET平台(上) 物联科技 百家号17-07-1008:57 当前,国内外物联网行业发展如火如荼,众多传统行业也在谋求向物联网转型.许多电子工程师或出于个人意愿 ...

  3. SQL游标在递归是的时候提示 "游标" 名称已经存在的问题

    游标的语法: DECLARE cursor_name CURSOR [ LOCAL | GLOBAL ] [ FORWARD_ONLY | SCROLL ] [ STATIC | KEYSET | D ...

  4. Java开发经常容易犯的错误

    调用Set.addAll()方法时抛UnsupportedOperationException异常 上面的Set是Map中keySet的返回结果. 程序中这样两句代码运行时,抛UnsupportedO ...

  5. scrapy 爬取豆瓣互联网图书

    安装scrapy conda install scrapy 生成一个scrapy项目 scrapy startproject douban settings文件 # -*- coding: utf-8 ...

  6. Flash AS3)actionScript代码制作文字渐变 + 描边

    var sp:Sprite = new Sprite; //容器,放置稍后的渐变背景和文本框 this.addChild(sp); //容器添加到舞台 var maskMC:MovieClip = n ...

  7. Pandas分组级运算和转换

    分组级运算和转换 假设要添加一列的各索引分组平均值 第一种方法 import pandas as pd from pandas import Series import numpy as np df ...

  8. 解决修改css或js文件后,浏览器缓存未更新问题

    问题描述:最近在上线新版本项目的时候,发现有的用户的操作还是调用的老版本JS里面的内容,这样就造成原来新的JS里面加上的限制不能限制用户的操作,从而导致用户可以重复操作. 问题产生原因: 如果在用户之 ...

  9. 去除web项目中的css、js缓存

    <link rel="stylesheet" type="text/css" href="~/Content/Home.css?param=Ma ...

  10. [转]Cloudera Manager和CDH5.8离线安装

    https://blog.csdn.net/zzq900503/article/details/52982828 https://www.cnblogs.com/felixzh/p/9082344.h ...