VueX mapGetters获取Modules中的Getters方式

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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)
    }
  }