vue3中如何使用这段代码computed: { ...mapGetters(['getShop'])}中的getShop方法
时间: 2023-05-20 22:01:24 浏览: 58
在Vue3中,可以使用以下代码来使用computed和mapGetters:
```
import { computed } from 'vue'
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getShop']),
computedShop() {
return computed(() => {
return this.getShop
})
}
}
}
```
然后,你可以在模板中使用computedShop来获取getShop方法的返回值。
相关问题
在vue3中computed和...mapGetters的组合使用
在Vue3中,可以通过computed和...mapGetters的组合使用来简化代码。computed可以用来计算派生状态,而...mapGetters可以将Vuex store中的getters映射到组件的计算属性中。例如:
```
import { computed, mapGetters } from 'vue'
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getUsername']),
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
```
在上面的代码中,我们使用了...mapGetters将Vuex store中的getters映射到组件的计算属性中,然后我们可以在组件中使用这些计算属性来获取数据。同时,我们也可以使用computed来计算派生状态,例如fullName。
在vue3中computed和...mapGetters的组合写法
在Vue3中,可以使用computed和...mapGetters的组合写法来获取store中的state和getter。具体的写法如下:
```
import { computed, mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'getterName1',
'getterName2'
]),
computedName1() {
return this.getterName1 + 'computed'
},
computedName2: computed(() => {
return this.getterName2 + 'computed'
})
}
}
```
其中,mapGetters是一个辅助函数,可以将store中的getter映射到组件的computed属性中。使用...运算符可以将映射的结果展开到组件的computed属性中。同时,也可以在computed属性中定义自己的计算属性,以便对映射的结果进行进一步的计算。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)