20180921_vuex相关

[openks]

vuex 的 getter 方法何时会执行

getter 相当于 vue 的计算属性,相关数据改变即会执行相关代码

为什么要用 vuex

需满足如下 3 点使用 vuex 才有意义。 如只有第一条使用 localstorage 即可

1. 多处使用同一数据源
2. 多处都有可能改动该数据源
3. 若某处改动，其他地方使用的该数据源需要同时改动

使用vuex的一个例子

正常流程：列表页 list->详情页 detail->具体操作页 operation(添加,修改,删除子对象) 返回流程：操作页->详情页->列表页 正常流程：

1. 从 home 到 list 调用借口获取列表数据 datalist 保存在 vuex 里(仅用于展示)
2. list->detail 2.1 如果 detail 页要显示的所有数据均可从列表页获取，则直接冲 vuex 里取数据做显示即可 2.2 如果 detail 页要显示的所有数据不能从列表页获取（出于性能考虑,某些关联较多的字段无需在列表页接口中返回）则先从 vuex 里获取完整的 data 对象 2.2.1 如果 vuex 里有完整的 data 对象则直接显示使用即可 2.2.2 如果 vuex 里没有则根据 id 获取该 data 对象并合并进 datalist 后保存在 vuex 里
3. detail->operate operate 页面需要显示数据可以从 vuex 里获取（detail 页已经把数据存入 vuex） operate 页面修改数据成功后重新获取 data 对象并合并进 datalist 后保存在 vuex 里

返回流程：

直接从vuex里取数据，不需要与服务端有任何交互

一些想法：

1. vuex 里可能保存大量数据则此时不宜修改嵌套较深的某一个子属性
2. 如果列表页保存的不是对象数组的完整数据，则获取某对象的完整数据后不建议修改原对象数组，应再创建一个完整的对象数组保存在 vuex 里，根据条件判断从完整对象数据还是非完整对象数组里获取数据