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处理数据的更多相关文章

  1. Electron-vue实战(三)— 如何在Vuex中管理Mock数据

    Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...

  2. 十、Vue:Vuex实现data(){}内数据多个组件间共享

    一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

  3. Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)

    这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...

  4. 修改vuex状态机中的数据

    vuex状态机中的数据是必须提交mutation来修改,如果现实开发中,我们需要修改,而又不想提交mutaition,应该怎么做呢?   先来回顾一下场景,有一个列表是存在vuex中的   这个列表展 ...

  5. vuex store更新了数据,但未触发getters

    遇到一个奇怪的问题,我将数组存储在store中,更新数组,第一次会生效,第二次就不会再触发getters,通过检查发现state中的数组是有更新的. 尝试过网上很多的解决办法: 1.getters r ...

  6. 25、vuex改变store中数据

    以登录为例: 1.安装vuex:npm install vuex --save 2.在main.js文件中引入: import store from '@/store/index.js'new Vue ...

  7. 组件 computed 与 vuex 中 getters 的使用,及 mapGetters 的使用,对象上追加属性,合并对象

    vue 是响应式的数据,这一点相当的方便我们的操作,但有些错误的操作方法会 vue 的响应无效 除此之外我们还要了解 vue.set() 和 Object.assgin() 的使用 vue.set() ...

  8. Vuex - state , getters , mutations , actions , modules 的使用

      1, 安装   vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...

  9. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

随机推荐

  1. 2017-11-10 Fr Oct 消参

    2017-11-04 Sa $ P(-3, 0) $ 在圆C $ (x-3)^2 + y^2 = 8^2 $ 内,动圆M与圆相切且过P点,求M点轨迹. 设切点 $ A(a, b) $,圆心 \(M(x ...

  2. WordCount编码实现及单元测试(第二次作业)

    项目码云地址:https://gitee.com/zhujunlin/wc.git 一.题目思路 ========== 阅读完题目要求之后我很懵,因为之前从未使用过博客园和码云工具,对编程的目标需求也 ...

  3. Java 定时任务的几种实现方式

    JAVA实现定时任务的几种方式 @(JAVA)[spring|quartz|定时器]  近期项目开发中需要动态的添加定时任务,比如在某个活动结束时,自动生成获奖名单,导出excel等,此类任务由于活动 ...

  4. spark on yarn 内存分配

    Spark On YARN内存分配 本文主要了解Spark On YARN部署模式下的内存分配情况,因为没有深入研究Spark的源代码,所以只能根据日志去看相关的源代码,从而了解“为什么会这样,为什么 ...

  5. mysql判断表里面一个逗号分隔的字符串是否包含单个字符串、查询结果用逗号分隔

    1.mysql判断表里面一个逗号分隔的字符串是否包含单个字符串 : FIND_IN_SET select * from tablename where FIND_IN_SET(传的参数,匹配字段) 例 ...

  6. Java第一周作业

    Java第一周作业 本周作业: 参考<<教材学习指导(http://www.cnblogs.com/rocedu/p/7911138.html)) 学习第一章视频 参考<<使用 ...

  7. Vue随笔记录

    一.创建Vue步骤(VS Code)    1.全局安装       npm install -g vue-cli 2.新建项目    vue init webpack "project-n ...

  8. 【转载】【吵架】能力 说清自己的能力。表达清楚 ;别人发飙你也要撕b;换位思考,把自己当领导层

    女上司和别人在会议室吵架,大家都说她变态.女人能当好领导吗?  治敏@为好优 2018-06-20 19:56:00 为好优姐姐: 想问问您,是不是职场女强人,都是那种彪悍的战斗机呀! 我刚来公司实习 ...

  9. Python+Selenium 自动化实现实例-处理分页(pagination)

    场景 对分页来说,我们最感兴趣的是下面几个信息 总共有多少页 当前是第几页 是否可以上一页和下一页 代码 下面代码演示如何获取分页总数及当前页数.跳转到指定页数 #coding:utf-8 from ...

  10. c++11新标准for循环和lambda表达式

    :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style]) h1, .markdown-previ ...