主要是看文档 vuex官方文档
基础：提取关键字/句
如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
- state, 驱动应用的数据源；
- view, 以声明方式将state映射到视图；
- 改变store中的状态的唯一途径就是显式地提交(commit) mutation.
--- 每个mutation 都有一个字符串（以increment为例）的事件类型(type)和回调函数(handler)。
--- 回调函数是我们实际进行状态更改的地方，并且回接收state作为第一个参数。
--- 不能直接调用一个mutation handler。
“触发一个类型为increment的mutation时，调用此函数”
--- 要唤醒一个mutation handler，需要以相应的type，调用store.commit方法。 - 由于store的状态是响应式的，在组件中调用store中的状态仅需要在计算属性中返回。触发变化也是在组件的method中提交mutation.
- mutation 是同步事务,使用action可以包含任意异步操作,action函数接受一个与store实例具有相同方法和属性的context对象，调用context.commit提交一个mutation
- 在组件中分发action：this.$store.dispatch('...')
- 后续再添加。。。
示例
组合action
- 该示例就可以看成是一个action，包含异步操作
- 可以向 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
网友评论