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 ...
随机推荐
- 1503.02531-Distilling the Knowledge in a Neural Network.md
原来交叉熵还有一个tempature,这个tempature有如下的定义: \[ q_i=\frac{e^{z_i/T}}{\sum_j{e^{z_j/T}}} \] 其中T就是tempature,一 ...
- django-rest-framework配置json web token
安装jwt库,简单快速的生成我们所需要的token 1.安装djangorestframe pip install djangorestframe 2.在settings.py的INSTALLED_A ...
- ajax、json、jsonp
这章分享下ajax.json.jsonp的学习记录,不得不说这真是些令人激动的技术. 推荐文章: https://segmentfault.com/a/1190000012469713 http:// ...
- 导出文件的时候 加大php内存
ini_set('max_execution_time', 3600); ini_set('memory_limit', '2048M');
- 寻找遗失的tags
现象:查询数据库,存在tags:{} 的字段,但是api查询时,不存在tags字段 日志定位Sample的init方法中对resource_metadata的扁平处理: 3.对应方法分析 在ceilo ...
- Java框架spring 学习笔记(十三):log4j介绍
功能 日志功能,通过log4j可以看到程序运行过程的详细信息. 使用 导入log4j的jar包 复制log4j的配置文件,复制到src下面 3.设置日志级别 info:看到基本信息 debug:看 ...
- Java学习笔记(二十四):单例设计模式singleton
为什么要使用singleton设计模式? 假设设计了一个操作数组的工具类(Tools),里面有一个锤子的方法(Hammer),如果不使用singleton设计模式,每次想调用Hammer方法都需要ne ...
- python异常捕捉以及处理
看标题觉得高大上,好像能处理所有的异常.但是,事实是只能按照字面的意思来理解这一段话. 众所周知写代码哪有不出bug的? 那么出现了bug 我们不想让程序因为bug的存在而退出.那么要怎么做呢? 今天 ...
- poj2777(线段树)
题目链接:https://vjudge.net/problem/POJ-2777 题意:有L块连续的板子,每块板子最多染一种颜色,有T种(<=30)颜色,刚开始将所有板子染成颜色1,O次操作(包 ...
- Mac/Linux 常用命令
一 mkdir 创建文件夹 mkdir myApp 在当前目录下创建myApp文件夹. mkdir -p /a/b/c 创建/a/b/c文件夹,如果/a或/a/b不存在,则自动创建. 二 touch ...