脚本宝典收集整理的这篇文章主要介绍了深入了解Vuex中的State和Getter,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。Vuex 的内脏由五部分组成:state、Getter、Mutation、Action 和 Module。本篇文章先带大家深入了解一下Vuex中的State和Getter,希望对大家有所帮助!
Vuex是vue的状态管理工具,为了更方便的实现多个组件共享状态。【相关推荐:《vue.js教程》】
npm install vuex --save复制代码
import Vue From 'vue';import Vuex from 'vuex'; Vue.use(Vuex);const Store = new Vuex.Store({ state: { count: 0 } })new Vue({ store, })
单一状态树,使用一个对象就包含了全部的应用层级状态。
Vuex 通过store 选项,提供了一种机制将状态从跟组件“注入”到每一个子组件中(调用Vue.use(Vuex))。
通过在根实例中注册store选项,该store实例会注入到根组件下的所有子组件中,且子组件能通过this.$store访问。
<div class="home"> {{ $store.state.count }}</div>复制代码
当一个组件需要获取多个状态时,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用MapState辅助函数帮助我们生成计算属性:
import { mapState } from 'vuex'; computed: { ...mapState(['count']), },
使用不同的名字:
computed: { ...mapState({ storeCount: state => state.count, // 简写 storeCount: 'count', // 等同于 state => state.count }), },
store的计算属性。getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 接收state作为其第一个参数、getters作为其第二个参数。
getters: { doubleCount (state) { return state.count * 2; } }
Getter会暴露为store.getters对象:this.$store.getters.doubleCount
也可以让getter返回一个函数,来实现给getter传参
getters: { addCount: state => num => state.count + num; }
this.$store.addCount(3);
import { mapsGetters } from 'vuex'; export default { computed: { ...mapGetters([ 'doubleCount', 'addCount', ]) } }
如果你想将一个 getter 属性另取一个名字,使用对象形式:
mapGetters({ // 把 `this.doneCount` 映射为 `this.$store.getters.doneToDOSCount` storedoubleCount: 'doubleCount' })
更多编程相关知识,请访问:编程入门!!
以上就是深入了解Vuex中的State和Getter的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的深入了解Vuex中的State和Getter全部内容,希望文章能够帮你解决深入了解Vuex中的State和Getter所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。