第八篇 状态管理——Vuex

参照例子——父子组件通信

• 和前面组件中父子通信部分一样

全局存储

• 通过增加公共变量store来存储需要共享的数据，简单粗暴
• 问题是，数据的改变没有痕迹，跟踪调试很困难

store模式

• 在上述例子基础上扩展store内容，数据存放在state中，增加的mutation属性用来存放修改数据的方法

Vuex

• 子组件可以通过this.$store访问到根组件下的store实例
• Vuex中的各个属性：
  • state：唯一的数据源
  • mutations：修改数据的方法，第一个参数默认是state
  • actions：函数接收一个与store实例有相同方法和属性的context对象，可以通过context.commit提交一个mutation(也可以通过对象方式提交，则mutation就会收到一个对象)，可实现异步需求，但context并不是store实例本身
  • 在methods里，可以通过 this.$store.dispatch('increment', 1);来注册一个触发action的方法(参数也可以是对象)，当被调用时就触发相应action的动作，继而提交mutation，最终改变state。

Vuex其他属性

• 默认情况下，getter,mutation,action是注册的全局的，这样使得多个模块对同一个这些属性能更快响应，但是如果要细分组件，局部注册，可以通过 namespaced: true 开启模块的命名空间。
• 注意this.$store.state.a.count的 $store.state.a 是全局store下a模块的state数据对象，可以看做是state暴露到全局，然后通过模块名区分内部属性
• Vuex中的modules和getters属性：
  • modules：如果有多个store的话可以分模块管理，每个模块有这些独立的参数
  • getters：计算属性，可以缓存数据，只根据依赖改变，第一个参数默认是state，第二个参数是其他getters