。。。mapstate后如何取值
时间: 2023-09-17 16:12:34 浏览: 22
在使用 Vuex 中的 mapState 辅助函数后,你可以直接通过映射的属性名访问对应的状态值。例如,如果你有一个名为 `count` 的状态,你可以使用 `...mapState(['count'])` 将其映射为组件的计算属性,在组件中就可以通过 `this.count` 来访问该状态的值了。如果你需要在组件中修改该状态的值,你也可以通过 `this.$store.commit('mutationName', payload)` 触发对应的 mutation 来修改它。
相关问题
mapState
mapState是Vuex中的一个辅助函数,用于将Vuex store中的state映射到组件的computed计算属性中。它接受一个对象作为参数,该对象的属性名为计算属性的名称,属性值为一个函数,该函数接收state作为参数,返回需要映射的计算属性的值。使用mapState可以简化组件中对Vuex store state的访问和更新。例如:
```
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
count: state => state.count
})
}
}
```
这样,在组件中就可以直接使用`this.count`访问Vuex store中的`count`状态值。
mapstate用法
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 ]