...mapState
时间: 2023-10-28 17:01:58 浏览: 87
mapState 是 Vuex 提供的一个辅助函数,用于将 store 中的 state 映射到组件的 computed 计算属性中。它的作用是简化组件中获取 state 的操作。
使用 mapState 需要传入一个对象,对象中的每个属性都是一个计算属性,它的值可以是一个函数或者一个字符串数组。如果是一个函数,它接收两个参数:state 和 getters,返回一个计算属性的值;如果是一个字符串数组,它会将数组中的字符串作为 state 中的属性名,从而得到相应属性的值。
示例代码:
```
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
count: state => state.count,
todos: state => state.todos
})
}
}
```
这样,在组件中就可以通过 this.count 和 this.todos 获取 store 中的对应状态值了。
相关问题
...mapState('user',['count']) ...mapState({count=>state.user.count)) 这两种写法的区别
这两种写法都是用于在Vue组件中将Vuex状态映射到组件的计算属性中。
第一种写法 `mapState('user',['count'])` 是使用命名空间来映射状态。其中 `'user'` 是指定的命名空间名字,`['count']` 是要映射的状态名字数组。这种写法会将命名空间为 `'user'` 的Vuex模块中的 `'count'` 状态映射到组件的计算属性中。
第二种写法 `mapState({count=>state.user.count))` 是使用对象来映射状态。其中 `{count=>state.user.count}` 是一个对象字面量,键名是要映射的计算属性名字,键值是一个函数,用来返回对应的状态。这种写法会将 `state.user.count` 状态映射到组件的计算属性中,并使用 `count` 作为计算属性的名字。
总结来说,两种写法的区别在于使用命名空间还是使用对象来指定要映射的状态,并且第二种写法可以指定计算属性的名字。
...mapState用法
mapState是一个辅助函数,它将组件的状态映射为计算属性。它的使用方式如下:
1. 在组件中引入mapState函数:
```
import { mapState } from 'vuex'
```
2. 将需要映射的状态定义为计算属性:
```
computed: {
...mapState({
count: state => state.count
})
}
```
3. 在模板中使用计算属性:
```
<template>
<div>{{ count }}</div>
</template>
```
这样,当Vuex store的state中的count属性更新时,计算属性count也会更新,并且这个更新是响应式的。
阅读全文