vuex的getters处理数据
getters是用来处理state里的数据的
getters传递一个值state
例子:
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,index)=>{
return {
name:ele.name+"__技术部",
age:ele.age+10
}
})
return item ;
}
}
})
Home.vue
<template>
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="(item,i) in getValue">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<hr>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="(item,i) in getItem">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Home",
data () {
return {
};
},
computed:{
getValue(){
return this.$store.state.prod;
},
getItem(){
return this.$store.getters.getValue
}
}
}
</script>
<style lang="css" scoped>
</style>
结果:

vuex的getters处理数据的更多相关文章
- Electron-vue实战(三)— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...
- 十、Vue:Vuex实现data(){}内数据多个组件间共享
一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...
- Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...
- 修改vuex状态机中的数据
vuex状态机中的数据是必须提交mutation来修改,如果现实开发中,我们需要修改,而又不想提交mutaition,应该怎么做呢? 先来回顾一下场景,有一个列表是存在vuex中的 这个列表展 ...
- vuex store更新了数据,但未触发getters
遇到一个奇怪的问题,我将数组存储在store中,更新数组,第一次会生效,第二次就不会再触发getters,通过检查发现state中的数组是有更新的. 尝试过网上很多的解决办法: 1.getters r ...
- 25、vuex改变store中数据
以登录为例: 1.安装vuex:npm install vuex --save 2.在main.js文件中引入: import store from '@/store/index.js'new Vue ...
- 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象
vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...
- Vuex - state , getters , mutations , actions , modules 的使用
1, 安装 vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
随机推荐
- 【转】如何用Eclispe调试java -jar xxx.jar 方式执行的jar包
原文地址:https://www.cnblogs.com/zzpbuaa/p/5443269.html 有时候,我们经常会需要调试 java -jar xxx.jar方式运行的代码,而不是必须在Ecl ...
- [Sw] Swoole-4.2.9 可以尝试愉快应用 Swoole 协程
大家知道 Swoole 提供了方便于服务器.网络编程的模式,简化了多进程编程. 这直接让 PHP 的运行很容易变成常驻内存的 Server 程序,执行效率上有了数倍的提升. 但是这一切还没有让人足够兴 ...
- 【译】深度双向Transformer预训练【BERT第一作者分享】
目录 NLP中的预训练 语境表示 语境表示相关研究 存在的问题 BERT的解决方案 任务一:Masked LM 任务二:预测下一句 BERT 输入表示 模型结构--Transformer编码器 Tra ...
- vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...
- jquery遍历----end()方法
定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 举个栗子: <body> <ul class="first"> ...
- 工程启动没有报错,但是dubbo后台显示没有提供者,工程没有提供服务
先说一下我遇到的问题:服务工程启动没有异常,消费者工程启动会出现很多nested(嵌套的)错误,但其根本错误是No provider available(缺少服务提供者).可是服务工程起来的时候明明没 ...
- 解题(ConflictPhoneNumber--冲突的电话号码)
题目描述 移动推出的校内网短号和亲情网短号非常方便,但在某款新手机里却出现了尴尬的bug.例如,当通讯录中包含如下号码时:1.小王:6002.小李:4676543.小张:600010输入600时,手机 ...
- Vue和后台交互的方式
1 vue-resource https://segmentfault.com/a/1190000007087934 2 axios 3 ajax
- 执行多条SQL语句,实现数据库事务(不可传入Sql参数)
执行多条SQL语句,实现数据库事务(不可传入Sql参数) http://blog.csdn.net/hanxuemin12345/article/details/9980371
- freeswitch dialplan 基础
freeswitch dialplan 基础 一.基础概念 dialplan 拨号方案 context 拨号表(块) extension 拨号去向 action (拨号后执行的)动作 condit ...