mapstate用法
时间: 2023-09-08 12:14:03 浏览: 60
mapState是Vuex提供的辅助函数,用于在组件中获取store中的状态。它可以简化组件中获取状态的代码。在组件中使用mapState时,我们需要先导入mapState函数,然后在计算属性(computed)中使用它。
使用方式有两种,一种是传入一个数组,数组中的每个元素都是store中的状态属性名,这样就会生成对应的计算属性。例如:
```
import { mapState } from 'vuex'
computed: {
...mapState(['counter', 'name', 'age'])
}
```
这样就会生成三个计算属性:counter、name和age,它们分别对应store中的counter、name和age属性。
另一种使用方式是传入一个对象,对象的键是计算属性的名称,值是一个函数,函数的参数是state,可以在函数中对state进行处理。例如:
```
import { mapState } from 'vuex'
computed: {
...mapState({
sCounter: state => state.counter,
sName: state => state.name,
sAge: state => state.age
})
}
```
这样就会生成三个计算属性:sCounter、sName和sAge,它们的值分别是store中的counter、name和age属性。
在模板中使用mapState生成的计算属性时,可以直接使用计算属性的名称。例如:
```
{{ sCounter }}
```
总结起来,mapState用于生成计算属性,简化了获取store中状态的代码。它可以通过传入数组或对象的方式来使用,使得组件中获取状态的代码更加简洁和易读。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [mapState使用方法](https://blog.csdn.net/weixin_50850100/article/details/123047258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [mapState的使用](https://blog.csdn.net/edc666/article/details/104670044)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]