mapActions,在vue2和vue3中的写法一样吗?
时间: 2024-03-06 13:50:21 浏览: 68
vue2和vue3在html中引用组件component方式不一样
在 Vue2 和 Vue3 中,`mapActions` 的写法是有一些不同的。
在 Vue2 中,`mapActions` 函数可以接受一个数组或对象作为参数,用于将 store 中的 actions 映射到组件中。下面是使用数组作为参数的示例:
```javascript
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions('moduleA', ['increment', 'decrement']),
...mapActions('moduleB', ['increment', 'decrement'])
}
}
```
上述代码中,我们在组件中使用 `mapActions` 函数将 `moduleA` 和 `moduleB` 模块中的 `increment` 和 `decrement` 方法映射到组件中。在组件中,我们可以直接调用这些方法,如下所示:
```javascript
this.increment()
this.decrement()
```
在 Vue3 中,`mapActions` 函数的写法有所不同,它接受两个参数:模块名和方法名数组。下面是一个使用 `mapActions` 函数的示例:
```javascript
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions('moduleA', ['increment', 'decrement']),
...mapActions('moduleB', ['increment', 'decrement'])
}
}
```
在 Vue3 中,我们可以使用相同的方式将 store 中的 actions 映射到组件中,并在组件中直接调用这些方法。
阅读全文