Vuex的使用(五)——mapGetters的定义和用法
参考文档:https://vuex.vuejs.org/zh/guide/当需要在组件中使用多个getters时,可以利用mapGetters批量生成计算属性(新增文件路径为src\components\componentE.vue),代码如下:mapGetters用法getters in vuex:{{param2}}引用上面创建的component-e查看效果(修改文件路径为src\main.
·
参考文档:https://vuex.vuejs.org/zh/guide/
当需要在组件中使用多个getters时,可以利用mapGetters批量生成计算属性(新增文件路径为src\components\componentE.vue,可以通过切换示例中注释的计算变量来查看对应的页面效果),代码如下:
<template>
<div>
<span>mapGetters用法</span>
<br />
<span>getters in vuex:{{param2}}</span>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "component-e",
// 基础写法,与state基本相同,唯一的区别是state在引用时用的是this.$store.state[xxx],getters在引用时用的是this.$store.getters[xxx]
// computed: {
// param2() {
// return this.$store.getters["param2"];
// }
// }
// 要注意的是,Vuex禁止开发者在mapGetters中对getters进行二次处理,所以以下写法是不行的(如果业务缺失需要,则应该采用上面的基础写法),控制台会提示:unknown getter: getters => getters.param2
// computed: mapGetters({
// param2: getters => getters.param2
// })
// mapGetters允许的写法(这个写法无法对getters进行二次处理),与mapState基本相同,唯一的区别是需要import mapGetters,且创建的是mapGetters对象
// computed: mapGetters({
// param2: "param2"
// })
// 与mapState一样mapGetters也允许简化写法
// computed: mapGetters(["param2"])
// 与局部计算变量混用(mapGetters与mapState混用时也需要按照以下写法定义state和getters)
computed: {
computedParam() {
return "computedParam";
},
...mapGetters(["param2"])
}
};
</script>
<style scoped>
</style>
引用上面创建的component-e查看效果(修改文件路径为src\main.js),代码如下:
import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import ComponentD from './components/ComponentD.vue'
import ComponentE from './components/ComponentE.vue'
new Vue({
el: '#app',
store,
components: { ComponentA, ComponentB, ComponentC, ComponentD, ComponentE },
template: '<div><component-a></component-a><component-b></component-b><component-c></component-c><component-d></component-d><component-e></component-e></div>'
});
运行后查看页面可以看到示例代码中通过mapGetters生成的几种计算属性之间没有任何区别。
更多推荐
已为社区贡献12条内容
所有评论(0)