mapstate mapaction区别
时间: 2023-11-29 12:44:28 浏览: 45
`mapState`和`mapAction`都是Vuex中的辅助函数,用于简化在组件中使用Vuex的过程。它们的区别在于:
- `mapState`用于将Vuex store中的state映射到组件的计算属性中,使得组件可以通过计算属性直接访问state中的数据。
- `mapAction`用于将Vuex store中的actions映射到组件的methods中,使得组件可以直接调用actions中的方法。
下面是一个简单的例子,展示了如何使用`mapState`和`mapAction`:
```javascript
// 在store中定义state和actions
const store = new Vuex.Store({
state: {
count: 0
},
actions: {
increment(context) {
context.commit('increment')
}
},
mutations: {
increment(state) {
state.count++
}
}
})
// 在组件中使用mapState和mapAction
export default {
computed: {
// 将store中的count映射到组件的计算属性中
...mapState(['count'])
},
methods: {
// 将store中的increment映射到组件的methods中
...mapActions(['increment'])
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)