vue3 使用扩展运算符使用mapGetters
时间: 2023-05-20 09:01:02 浏览: 90
可以这样使用:
```javascript
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['getterName1', 'getterName2'])
}
}
```
其中,`getterName1` 和 `getterName2` 是你在 Vuex store 中定义的 getter 名称。使用扩展运算符可以将这些 getter 直接映射到组件的计算属性中,方便使用。
相关问题
vue3中的扩展运算符如何使用
在 Vue3 中,扩展运算符可以用于传递数组或对象的所有属性和方法。对于数组,可以使用扩展运算符将一个数组展开成另一个数组,例如:
```
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
```
对于对象,可以使用扩展运算符将一个对象展开成另一个对象,例如:
```
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }
```
需要注意的是,如果展开的对象中有相同的属性名,则后面的属性会覆盖前面的属性。
vue3使用mapGetters
在Vue3中,使用mapGetters可以将store中的getters映射到组件的计算属性中。具体使用方法如下:
1. 在组件中引入mapGetters方法:import { mapGetters } from 'vuex'
2. 在计算属性中使用mapGetters方法:computed: { ...mapGetters(['getterName']) }
3. 在模板中使用计算属性:{{ getterName }}
其中,getterName为store中定义的getter名称。
相关推荐
![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)