Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态.

在 Vue 组件中获得 Vuex 状态：

// 创建一个 Counter 组件
const Counter = {template: `<div>{{ count }}</div>`,computed: {count () {return store.state.count}}
}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

mapState也称为;对象展开运算符

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'export default {// ...computed: mapState({// 箭头函数可使代码更简练count: state => state.count,// 传字符串参数 'count' 等同于 `state => state.count`countAlias: 'count',// 为了能够使用 `this` 获取局部状态，必须使用常规函数countPlusLocalState (state) {return state.count + this.localCount}})
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([// 映射 this.count 为 store.state.count'count'
])

`mapState` 函数返回的是一个对象。

Vuex中的 mapState相关推荐

封装一个hook，在Vue3 setup中使用Vuex中的mapState，mapGetters
在Vue3中没有很好的方法使用Vuex中的映射函数到setup中使用,一般就使用一种效率低一些的方法 setup(props, context) {const store = useStore();c ...
[vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理搭建vuex环境创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
vuex结合php,vuex中store的使用介绍（附实例）
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
Vuex中的核心方法
Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.每一个Vuex应用的核心就是 ...
uniapp中利用监视vuex中state数据配合uview实现登录消息提示
先看效果图登录成功或者退出成功都能够给用户提示,提示用户体验! uview的顶部消息提示详情可见u-top-tips 设计思路首先是页面的布局是将顶部消息提示写在了个人详情页内 <u-to ...
Vuex状态管理-mapState、mapMutations、mapActions
一.mapState Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. // store.j ...
java写mapstate算子,vuex state及mapState的基础用法详解
vuex state及mapState的基础用法详解 2019-01-07 编程之家收集整理的这篇文章主要介绍了vuex state及mapState的基础用法详解,编程之家小编觉得挺不错的,现在分享 ...

Vuex中的 mapState

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态.

`mapState` 函数返回的是一个对象。

Vuex中的 mapState相关推荐

最新文章

热门文章

Vuex中的 mapState

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态.

mapState 函数返回的是一个对象。

Vuex中的 mapState相关推荐

最新文章

热门文章

`mapState` 函数返回的是一个对象。