mapgetters
时间: 2023-09-11 12:03:50 浏览: 69
mapGetters 是 Vuex 中的一个辅助函数,用于获取 state 中的值。它接收两个参数:第一个参数是模块的名称(可选),第二个参数是需要获取的 getter 名称。使用 mapGetters 可以简化在组件中获取 getter 的过程。
以下是一个使用 mapGetters 的示例:
```javascript
// 在 Vuex store 中定义 getter
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
getters: {
getCount: state => state.count
}
})
// 在组件中使用 mapGetters
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用 mapGetters 将 getCount 映射为组件的计算属性
...mapGetters(['getCount'])
}
}
```
在上面的例子中,`getCount` 是一个 getter 名称,通过使用 `mapGetters(['getCount'])`,我们将 `getCount` 映射为组件的计算属性。在组件中可以直接通过 `this.getCount` 获取到对应的 state 值。
注意:`mapGetters` 是一个辅助函数,需要在组件中使用解构语法 `...` 进行展开。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)