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中的数据映射到组件的计算属性当中,在组件不多,组件的数据通信不是很多的时候这样写看似将简单的东西复杂化了,但是在稍复杂点的项目中这样会极大的减少工作量,及组件之间数据传递的复杂程度。
2.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 }
<span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'setNumber'</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>number<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// console.log(this.a,this.b,this.c) // 在组件中可以直接通过this取到相应的值</span> <span class="token punctuation">}</span>
}
我们在计算属性中添加
…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在语法层面
展开。这里不做过多介绍
- 1
- 2