vuex学习

主要是看文档 vuex官方文档

基础：提取关键字/句

如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

1. state, 驱动应用的数据源；
2. view, 以声明方式将state映射到视图；
3. 改变store中的状态的唯一途径就是显式地提交(commit) mutation.
   --- 每个mutation 都有一个字符串（以increment为例）的事件类型(type)和回调函数(handler)。
   --- 回调函数是我们实际进行状态更改的地方，并且回接收state作为第一个参数。
   --- 不能直接调用一个mutation handler。
   “触发一个类型为increment的mutation时，调用此函数”
   --- 要唤醒一个mutation handler，需要以相应的type，调用store.commit方法。
4. 由于store的状态是响应式的，在组件中调用store中的状态仅需要在计算属性中返回。触发变化也是在组件的method中提交mutation.
5. mutation 是同步事务,使用action可以包含任意异步操作,action函数接受一个与store实例具有相同方法和属性的context对象，调用context.commit提交一个mutation
6. 在组件中分发action：this.$store.dispatch('...')
7. 后续再添加。。。

示例

组合action

1. 该示例就可以看成是一个action，包含异步操作
2. 可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

在组件中分发 action

需要注意的点

• 表单处理

• watch 和 computed的熟练运用
  1.背景示例：
  表单处理中提到的：<input v-model="obj.message">
  （1）obj 是在计算属性中返回的一个属于 Vuex store 的对象
  （2）“Vuex 的思维”：给 <input> 中绑定 value，然后侦听 input 或者 change 事件:<input :value="message" @input="updateMessage">
  反正就是watch，computed不知道什么时候用哪一个
  2.基础知识
  vue计算属性和侦听器
  (1) computed：
  

  computed示例
  ---可以像绑定普通属性一样在模板中绑定计算属性。
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  --- vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
  ---计算属性是基于它们的响应式依赖进行缓存的
  ---计算属性的setter：
  计算属性的setter

  (2)watch:
  ---更通用的方式来观察和响应 Vue 实例上的数据变动.
  ---使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
  (3)watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
  --- watch擅长处理的场景：一个数据影响多个数据。
  ----- 监听数据变化，执行一些副作用 (比如更改vue实例的data属性，或者发起请求）。
  --- computed擅长处理的场景：一个数据受多个数据影响。
  -----根据一个或一些值计算出来一个新的值，一般不用做执行副作用

  (4) 使用示例：
  computed中获取store中的state

  
  computed

监听productDetail 变化，每次选择不一样的商品属性，商品的库存和销量等显示信息也要做相应变化，故需要重新updateProductDetail 。

watch