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在语法层面展开。这里不做过多介绍
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。