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. react项目如何修改默认3000端口号

    在运行react项目时,经常会遇到默认的3000端口被占用的情况,此时不想查找哪个程序占用了3000端口,想使用其他端口继续运行. 打开项目中的node_modules文件夹,找到react_scri ...

  2. CentOS6.3上安装与配置nginx+php+mysql环境

    1. 目前nginx采用是源码包安装的方式(yum安装失败),下载地址:http://nginx.org/en/download.html 我这里的安装包是:nginx-1.12.0.tar.gz 2 ...

  3. win10 开发mfc 64位 ocx控件

    问题1.模块“XXX.ocx”加载失败 解决办法:项目--〉属性--〉常规-〉配置类型-〉  动态库(.dll) 修改为 静态库(.lib) 问题2.1>x64\Release\stdafx.o ...

  4. PhoenixFD插件流体模拟——UI布局【Interaction】详解

    流体交互 本文主要讲解Interaction折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Interaction 主要 ...

  5. Arrays和String单元测试-20175218

    Arrays和String单元测试 一.题目 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arra ...

  6. SpringMVC中注解@RequestBody和@ResponseBody的使用区别

    首先上源码 在面试时经常会问到我们如何使用SpringMVC将Http请求转换为java对象,或者又是问如何将结果转换为java的呢? SpringMVC在接收到请求之后HandlerMapping像 ...

  7. Max answer(单调栈+ST表)

    Max answer https://nanti.jisuanke.com/t/38228 Alice has a magic array. She suggests that the value o ...

  8. ThinkPHP3.2 --- 中文乱码问题

    在thinkphp中初次运行时 会出现中文乱码问题,解决方法也很简单 只需要在入口文件index.php加上这段代码即可: <?php header("Content-Type: te ...

  9. stm32输入的功能引脚功能介绍

    Ⅰ.写在前面在开发STM32的时候,都需要对IO的模式进行配置(GPIO_InitStructure. GPIO_Mode = xxx).但是,你们都知道各种模式的具体意义吗? 有的人问:IO口输出可 ...

  10. 洛谷 P1426小鱼会有危险吗

    题目: 有一次,小鱼要从A处沿直线往右边游,小鱼第一秒可以游7米,从第二秒开始每秒游的距离只有前一秒的98%.有个极其邪恶的猎人在距离A处右边s米的地方,安装了一个隐蔽的探测器,探测器左右x米之内是探 ...