vuex mapState

使用vuex的mapState是为了获取state的映射关系的，在不使用mapState时候，采用computed中加入全局状态变量的方法如下：

computed: {count () {return this.$store.state.count}}

但是当组件中需要多个全局状态变量的时候，就很麻烦使用mapState就可以快速建立映射关系：

方式1：数组

import { mapState } from 'vuex'
const Counter = {template: `<div>{{ count }}</div>`,computed: mapState([// 映射 this.count 为 store.state.count 数组的方式'count'])
}

方式二：采用函数（但是注意如果想要使用data中的变量，必须是常规函数而不能是箭头函数）

 computed: mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`countAlias: 'count',// 为了能够使用 `this` 获取局部状态，必须使用常规函数countPlusLocalState (state) {return state.count + this.localCount}})

方式三：扩展运算符（这种方式比较常用，不仅可以添加新的计算属性，而且可以随意映射state变量而且可以使用局部变量 this.localCount）

computed: {localComputed () { /* ... */ },// 使用对象展开运算符将此对象混入到外部对象中...mapState({// ...count: state => state.count,countAlias: 'count',countPlusLocalState (state) {return state.count + this.localCount}})
}

vuex mapState相关推荐

vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
【Vue】vuex mapState和mapGetters
1.mapState方法:用于帮助映射state中的数据为计算属性 computed: {// 借助mapState生成计算属性:sum.school.subject(对象写法一)...mapStat ...
前端:一篇彻底搞懂vuex (mapState、mapGetters、mapMutations、mapActions)
文章目录一.state 1.1 state使用 1.2 mapState 辅助函数二.getters 2.1 getters的使用三.Mutation 3.1 mutations的使用 3.2 ...
vuex mapState的使用
store/index.js import Vue from 'vue'; import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.S ...
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
会出现的错误: 遍历渲染列表时,不能省略 $store.state 去写成cinemaList,会出错,渲染不出来数据: 注意事项: 注意认真检查没有用mapState映射时,要所有的状态都要加 $s ...
[转] Vuex入门（2）—— state,mapState,...mapState对象展开符详解
1.state state是什么? 定义:state(vuex) ≈ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂 ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
Vue 之 Vuex（3）mapState 的使用
mapState 是用来简化 computed 计算属性的一种写法,下面做一个对比: 未使用之前 computed: {count() {return this.$store.state.count} ...
Vuex中mapState
最近使用到这个辅助函数时,忘了好多,温习一下mapState 普通手写计算属性: computed:{count(){ // 计算属性渲染的时候 {{count}}对的 count()错误写法 ret ...

vuex mapState

vuex mapState相关推荐

最新文章

热门文章