4.vuex学习之getters、mapGetters

gettters可以理解为计算属性

在store.js中

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)//访问状态对象
const state = {count:1
}

const getters = {//vue2.0不要使用箭头函数,getters主要任务就是对状态state对象里面的数据，执行计算后输出count:function(state){return state.count+=100}
}
export default new Vuex.Store({state,getters
})

App.vue文件中

<template><div id="app"><img src="./assets/logo.png"><h1>{{ msg}}</h1><!--访问状态对象--><div>{{$store.state.count}}</div><!--getters中获取到的-->    <p>{{count}}</p></div>
</template><script>//vuex提供的辅助函数
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {name: 'app',data () {return {msg: 'Welcome to Your Vue.js App'}},computed:{count(){return this.$store.getters.count},// ...mapGetters([//使用mapGetters简写//   'count'// ])}
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}h1, h2 {font-weight: normal;
}ul {list-style-type: none;padding: 0;
}li {display: inline-block;margin: 0 10px;
}a {color: #42b983;
}
</style>

转载于:https://www.cnblogs.com/tw6668/p/9107458.html

4.vuex学习之getters、mapGetters相关推荐

Vuex入门（3）—— getters,mapGetters,...mapGetters详解
Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{sex: ...
Vuex实践-mapState和mapGetters
一.前言本文章是vuex系列的最后一篇,主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters. 二.多个模块中mapState和mapGetters的 ...
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
Vuex 提供了 mapState.mapGetters.mapActions 和 mapMutations 四个函数,其返回结果分别是 mappedState,mappedGetter,mapped ...
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
mapState 和mapGetters 用于生成计算属性computed mapState({"计算属性名":"State数据","xxx" ...
vuex中的getters
vuex中的getters vuex中的getters与vue中的computed计算属性十分相似,在vuex中的Store仓库里,state就是用来存放数据,而getters类似于computed计 ...
070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
十三、Vuex学习笔记
一.Vuex是做什么的? 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. ...
Vuex中state,getters,mutations的使用方法以及辅助函数的原理
Vuex是是一个程序里面的状态管理模式,它是集中式存储所有组件的状态的小仓库,并且保持我们存储的状态以一种可以预测的方式发生变化. state中存放的是全局变量,定义如下 state: {//存放全局 ...
vuex进阶 mapState、mapGetters、mapMutations、mapActions
一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态 import Vue from 'vue' import Vuex fr ...

4.vuex学习之getters、mapGetters

4.vuex学习之getters、mapGetters相关推荐

最新文章

热门文章