VueX mapGetters获取Modules中的Getters方式

 更新时间:2022年08月31日 16:16:49   作者:静已思之愈浓  
这篇文章主要介绍了VueX mapGetters获取Modules中的Getters方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

VueX mapGetters获取Modules的Getters

注明 : permission 是你要获取的Modules中的哪一个 (permission 即是 模块名);

        ...mapGetters("permission",[
            'ReturnRoutes'
        ]),
        ...mapGetters("模块名",[
            '方法名'
        ]),

非辅助函数映射获取方式 :

this.$store.getters["permission/ReturnRoutes"]
this.$store.getters["模块名/方法名"]

permission 实际上传入的是一个路径(一般在Modules嵌套的情况下)

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
};        

createNamespacedHelpers 命名空间辅助函数, 来进行规定 辅助函数的路径

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

各位码友多读文档, 如果您有幸看到这篇文章, 说明您是吃了少读文档的亏, 和我一样, 共勉~详情请看 Vuex文档

mapGetters的使用及简单实现原理

项目中的mapGetters

在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会变得极为繁琐。

1.这里首先说下项目中mapGetters的使用

先看下store部分目录结构

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import book from './mudules/book'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    book
  },
  getters
})

book.js文件

const book = {
  state: {
    number: 1
  },
  mutations: {
    SET_NUMBER: (state, number) => {
      state.number = number
    }
  },
  actions: {
    setNumber: ({commit, state}, number) => {
      // console.log(state.number, number)
      return commit('SET_NUMBER', number)
    }
  }
}
export default book

getters文件

const getters = {
  number: state => state.book.number
}
export default getters

在vue组件中

import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
    }
  }

通过引入mapGetters 我们就可以轻松的取到vuex中存储的数据,从代码中可以看出,getters就类似于vue组件中的computed(计算属性),在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中,在组件不多,组件的数据通信不是很多的时候这样写看似将简单的东西复杂化了,但是在稍复杂点的项目中这样会极大的减少工作量,及组件之间数据传递的复杂程度。

mapGetters简单实现原理

在上面的代码中可能很多人在项目中用到过,但是对于其原理可能不是很理解。

可能有一部人对于在组件计算属性中…mapGetters([‘number’]),不是很理解,下面就简单写一个方法实现类似的功能。

在组件中

 import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      //...fn(['a', 'b', 'c'])      //需要实现这样一个方法传入一个数组
    },
    methods: {
      menuClick (key) {
        if (key === 0) {
          this.$router.push('/ebook')
        }else if (key === 1) {
          this.$router.push('/datachart')
        }else{
          return
        }
        
      }
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
      // console.log(this.a,this.b,this.c)  // 在组件中可以直接通过this取到相应的值
    }
  }

我们在计算属性中添加

…fn([‘a', ‘b'])

要求在组件中可以直接通过

this.a 和this.b 取到相应的值

const getters = {
    a: () => 1,
    b: () => 2,
    c: () => 3
  }
  function fn (keys) {
    const data = {}
    keys.forEach(key => {
      if (getters.hasOwnProperty(key)) {
        data[key] = getters[key]
      }
    });
    return data
  }
  
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['number']),
      ...fn(['a', 'b', 'c'])
    },
    mounted () {
      this.$store.dispatch('setNumber',10).then(() => {
        console.log(this.number)
      })
      console.log(this.a,this.b,this.c)
    }
  }

打印结果为1,2,3

方法getters就类似于vuex中getters,

方法fn与vuex中的mapGetters有着相似的功能,其实在vuex的底层中也是使用这样类似的原理,这样看上去是不是简单很多。

注:(...)是es6新增语法展开运算符,大体有两个主要功能,收集参数与将数组表达式或者string在语法层面展开。这里不做过多介绍

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 5个实用的Vue技巧分享

    5个实用的Vue技巧分享

    在这篇文章中,我们将探讨五个实用的 Vue 技巧,这些技巧可以使你日常使用 Vue 编程更高效、更富有成效,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • Vue3+Spring Framework框架开发实战

    Vue3+Spring Framework框架开发实战

    这篇文章主要为大家介绍了Vue3+Spring Framework框架开发实战详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 在Vue3.x中实现类似React.lazy效果的方法详解

    在Vue3.x中实现类似React.lazy效果的方法详解

    React 的 React.lazy 功能为组件懒加载提供了原生支持,允许开发者将组件渲染推迟到实际需要时再进行,虽然 Vue3.x 没有一个直接对应的 lazy 函数,但我们可以通过动态导入和 defineAsyncComponent 方法来实现类似的效果,需要的朋友可以参考下
    2024-03-03
  • 浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

    这篇文章主要介绍了浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,需要的朋友可以参考下
    2022-12-12
  • 详解key在Vue列表渲染时究竟起到了什么作用

    详解key在Vue列表渲染时究竟起到了什么作用

    这篇文章主要介绍了key在Vue列表渲染时究竟起到了什么作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    五步教你用Nginx部署Vue项目及解决动态路由刷新404问题

    nginx 是一个代理的服务器,下面这篇文章主要给大家介绍了关于如何通过五步教你用Nginx部署Vue项目及解决动态路由刷新404问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue2.x通用编辑组件的封装及应用详解

    Vue2.x通用编辑组件的封装及应用详解

    这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 插件系统简析

    Vue-cli@3.0 是一个全新的 Vue 项目脚手架。这篇文章主要介绍了Vue-cli@3.0 插件系统简析,需要的朋友可以参考下
    2018-09-09
  • Vue中inheritAttrs的使用实例详解

    Vue中inheritAttrs的使用实例详解

    这篇文章主要介绍了Vue中inheritAttrs的使用实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue 监听列表item渲染事件方法

    Vue 监听列表item渲染事件方法

    今天小编就为大家分享一篇Vue 监听列表item渲染事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论