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 ...
随机推荐
- lnmp之Nginx配置https加密访问
配置lnmp之Nginx网站支持https加密访问 注: 1. 这里拿购买的(pxsnx.pxjy.com)证书来做样例 证书文件共有三个---> (pxsnxg.pxjy.com_ca.crt ...
- yum管理工具
yum:也是一个rpm包的管理工具,可以实现自动解决rpm包的依赖关系(自动安装依赖顺序进行rpm包的安装) 为何rpm包会有依赖关系? 制作rpm的人,在制作rpm包的时候,就将这个rpm的所依赖的 ...
- sql语句(已在Oracle中测试,之后有添加内容放在评论中)
1增 1.1[创建一张表] create table 表名(列名 类型); 例: ),性别 ),出生日期 date); ),sex ),出生日期 date); 1.2[插入单行]insert [int ...
- cpanm Plack相关
1.curl -L https://cpanmin.us | perl - --sudo App::cpanminus 参考:https://metacpan.org/pod/App::cpanmin ...
- 模型压缩,模型减枝,tf.nn.zero_fraction,统计0的比例,等。
我们刚接到一个项目时,一开始并不是如何设计模型,而是去先跑一个现有的模型,看在项目需求在现有模型下面效果怎么样.当现有模型效果不错需要深入挖掘时,仅仅时跑现有模型是不够的,比如,如果你要在嵌入式里面去 ...
- spring AOP capbilities and goal
Spring AOP 是用纯JAVA 实现的. 不需借助JAVA代码在编译处理阶段来实现. Spring 是在运行期实现的.AOP的实现可以在编译,加载,运行三个阶段来实现:Spring AOP 也不 ...
- 一个简单的struts2上传图片的例子
https://www.cnblogs.com/yeqrblog/p/4398914.html 在我的大创项目中有对应的应用
- IO分类
按流向分类: 输入流 读取数据 FileReader Reader 输出流 写入数据 FileWriter Writer 按数据类型分类: 字节流 字节输入流 读取数据 InputStream 字节输 ...
- supervisorctl安装使用文档
1.apt-get install supervisor下载或者pip install supervisor(因为supervisor是python写的)supervisor和python项目没有关系 ...
- vue的表单输入绑定
1.单行绑定 <p>{{logintype}}</p> <input type="text" v-model="logintype" ...