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 ...
随机推荐
- 【UiPath 中文教程】02 - 创建自定义 Activity
在 UiPath Studio 中,活动 (Activity) 是流程自动化的基石,是构成自动化程序的最小模块.它们被包含在一个个 NuGet 包中. UiPath Studio 中有 3 类包: 官 ...
- C# 异步示例代码
在 使用BackgroundWorker组件 一文中,阐述了在Winform编程中,使用BackgroundWorker组件实现异步调用,本文主要讲述利用委托实现异步. 以下描述摘抄于MSDN: 异步 ...
- 吴裕雄 python 机器学习——Lasso回归
import numpy as np import matplotlib.pyplot as plt from sklearn import datasets, linear_model from s ...
- express 内存溢出问题分析定位
一.现象 1. 如下报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 1: n ...
- Maven插件maven-shade-plugin打包配置
转载以下两篇文章 https://www.cnblogs.com/fuxinci/p/3356087.html https://chenzhou123520.iteye.com/blog/197132 ...
- 从 PC 卸载 Office
https://support.office.com/zh-cn/article/%E4%BB%8E-PC-%E5%8D%B8%E8%BD%BD-Office-9dd49b83-264a-477a-8 ...
- 在Ubuntu中使用JDB调试代码
在Ubuntu中使用JDB调试代码 了解JDB JDB是JDK安装的一部分,是基于文本和命令行的调试工具,JDB是可以免费获取且平台独立的,缺点是只有命令行格式. JDB基础命令 在方法中设置断点st ...
- html页面的CSS、DIV命名规则(仅供参考学习)
CSS命名规则: 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中: ...
- 2018-2019-2 20165315《网络攻防技术》Exp5 MSF基础应用
2018-2019-2 20165315<网络攻防技术>Exp5 MSF基础应用 目录 一.实验内容 二.实验步骤 1.一个主动攻击实践 ms08_067(成功) 2.一个针对浏览器的攻击 ...
- MySQL主备
服务器基本环境: 两台centos6.4.iptables diabled .selinux disabled 两台的hosts解析 #yum install mysql -y //这个一定要装 ...