Store=State+Mutation
1 .State(与store的区别):
每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。然而,这种模式导致组件依赖全局状态单例。在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中,且子组件能通过 this.$store 访问到。
mapState 辅助函数:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性
2.Getter
从 store 中的 state 中派生出一些状态.
所解决问题:如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
3.Mutation(必须为同步函数)
类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
store.commit:调用
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
4.Action(解决异步)
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作
store.dispatch :分发 Action,Action 的触发方法
在组件中分发 Action
你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
5.Module
将 store 分割成模
网友评论