Vue_02生态篇_002_Vuex核心概念及底层原理

核心概念

• State：
  • this.$store.state.xxx 取值
  • mapState（简写）
  • 提供一个响应式数据
• Getter：
  • this.$store.getters.xxx 取值（类似于计算属性，有缓存的功能）
  • mapGetters（简写）
  • 借助Vue的计算属性 computed 实现缓存
• Mutation：
  • this.$store.commit( “xxx” ) 赋值
  • mapMutations（简写）
  • 改变 state 方法
• Action：
  • this.$store.dispatch( “xxx” ) 赋值（借助commit）
  • mapActions
  • 触发mutation方法
• Module
  • Vue.set 动态添加 state 到响应式数据中

原理概论

• getter缓存功能

将 getter 中的方法赋给 computed 的方式实现

• store如何挂载到this.$store

调用install方法，通过全局混入的功能Vue.mixin({ beforeCreate: vuexInit })，在方法内实现this.$store注入的功能（向父级查找：options.parent.$store）