应用场景

提供一个地址省市区地址联动操作的应用场景:在地址管理的地址修改、地址添加、选择送货区域等逻辑中,会用到该联动picker。在地址picker操作中,需要请求省份列表,下面以省份列表的操作为例。

数据共享实现思路

利用vuex,通过查找vuex中是否存在省级列表,如果存在,则直接取list;如果不存在,则调用相应的接口取数据。

单一业务数据流控制方法

我们会把从后端取到的list存在state中,实现数据状态的共享,但取原始数据的方法、存vuex的方法,可能会放在各自的业务当中。如此,使得相同数据的逻辑虽然一样,但是会存在多份代码实现。这就是数据共享做得不够彻底,导致当数据结构或者存取逻辑发生变化的时候,各个业务逻辑也都要相应的发生变化,且list的state状态,可能会出现不可控的情况。

最佳的方式

将整个list的存取逻辑,同状态一起放入vuex当中,实现真正的数据共享。

地址的操作无非就是增、删、改、查~~将这些操作封装在vuex当中,实现对state的相应操作,将其提供给视图,将保持数据的一致性,也使得数据流更为清晰。

以取地址省份列表为例,代码如下:

\\ vuex
const state = {
list: []
// list: [{
// province: '北京市', // 市名
// provinceCode: '110000' // 对应code码
// }]
}
// 仅举例,可进行统一格式化
const getters = {
provinceList(state) {
return state.list
}
}
const actions = {
// const GETROVINCELIST = 'getProvinceList'
[nActions.GETPROVINCELIST]({commit, state}, params) {
if (state.list.length) {
return
}
getProvinceList(params).then(({success, result}) => {
if (success) {
commit(nMutations.UPDATEROVINCELIST, result.deliverList)
}
})
}
}
const mutations = {
// const UPDATEROVINCELIST = 'updateProvinceList'
[nMutations.UPDATEROVINCELIST](state, list) {
if (list.length) {
list.map((item) => {
if (!item.province) {
return Object.assign(item, {
province: '',
provinceCode: 0
})
}
})
}
state.list = list
}
} export default {
state,
getters,
actions,
mutations
}

如代码所示,步骤如下:

  • step1:定义数据初始化状态,将数组属性细节使用注释的形式,放在state中,有利于开发者往后维护时,进行对照;
  • step2:使用actions的getProvinceList方法,实现取provinceList的逻辑,先查找state中,如果存在地址列表,则不发送数据请求;如果不存在,则向后端请求。
  • step3:使用mutations的updateAddressList方法,将取到的地址列表进行格式化,再存入state中;避免在业务端进行格式化处理;
  • step4:可通过getters获取数据。(这里的获取简单,并不需要进行相应处理,只是举例)

如此,便将取的逻辑与数据状态都存入到了vuex当中共享。如果因性能优化等,需要进行逻辑调整,不需要改动业务逻辑,仅需要在相应的方法中进行处理即可。如,省级列表数据,基本万年不变,所以可以直接存本地缓存,先判断本地缓存中是否存在,再进行相应的存取。在该共享模式下,需要做的操作如下:

  • step1:在actions的getProvinceList的方法中,最开始的位置,增加判断本地缓存的操作;
  • step2:然后在获取后端数据的位置,将取到的provinceList存入缓存当中。

如上,只需要两步操作,就可以实现多处调用的一致性。

vuex数据管理-数据共享的更多相关文章

  1. vuex数据管理-数据模块化

    对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...

  2. Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用

    一,数据共享 1.  安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...

  3. vuex数据管理-数据适配

    由于接口在上线前,不可避免的会出现变动,小则属性名变,大则结构变化.如果处理不当,结构变化时,视图的代码也需要做相应的更改,然后就是容错方法的变动,接着重新自测等,这样,变化成本随着结构的复杂度大大加 ...

  4. vuex实现数据共享

    1.store.js结构 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Sto ...

  5. part7 vuex实现数据共享

    vuex 是数据框架(一个插件)(单项数据的改变流程,组件改数据必须先调Action用dispatch方法) 大型项目vue只能承担视图层的主要内容 大量数据传递的时候,往往需要一个数据框架辅助 例子 ...

  6. vue中vuex实现持久化的几种方法

    前提:大家都知道vuex真的数据共享是不持久的,例如登录后一刷新,state中存的token就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...

  7. vue 项目其他规范

    列表 vuex数据管理 * 数据模块化:vuex数据管理-数据模块化 数据适配:vuex数据管理-数据适配 数据共享:vuex数据管理-数据共享 路由优化 keep-alive组件设置 保留滚动位置 ...

  8. Vue相关问题

    1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter, ...

  9. Vue 浅析与实践

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:曾柏羲 导语 入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新 ...

随机推荐

  1. POJ3046选蚂蚁创建集合_线性DP

    POJ3046选蚂蚁创建集合 一个人的精力是有限的呢,如果一直做一件事迟早会疲惫,所以自己要把握好,不要一直埋头于一件事,否则效率低下还浪费时间 题目大意:一共有T(1,2...n为其种类)种蚂蚁,A ...

  2. 一个前端小白,关于vue\react等框架下table的应用总结

    出来实习一个月多,对于前端,运用相关的最多的就是table,想总结一下先关的内容 一.table提供的功能 1.显示表 2.可编辑:分为可编辑行和可编辑块,但是原理都一样就是设置一个flag,true ...

  3. AutoCompleteTextView 简单用法

    http://blog.csdn.net/i_lovefish/article/details/17337999

  4. RxSwift学习笔记3:生命周期/订阅

    有了 Observable,我们还要使用 subscribe() 方法来订阅它,接收它发出的 Event. let observal = Observable.of("a",&qu ...

  5. hdu 1.2.8

    #include<cstdio> #include<iostream> using namespace std; int pow(int a,int b) { ; while( ...

  6. CentOS7中配置vsftpd

    1.yum -y install vsftpd  安装vsftpd 2.配置vsftpd的配置文件(/etc/vsftpd/vsftpd.conf)主要修改以下配置内容 #不允许匿名访问 anonym ...

  7. ArrayBlockingQueue源码解析(1)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注意:在阅读本文之前或在阅读的过程中,需要用到ReentrantLock,内容见<第五章 Reentr ...

  8. 【UOJ244】 【UER #7】短路(贪心)

    传送门 uoj Solution 简单题? 考虑一条路径长什么样子,一定是经过某一个字母环的左上角,那么答案就很简单了. 我们记一个前缀最小值,这样子让他一路走下去一定是最优! 然后扫一遍就好了. 代 ...

  9. 我的AI之路 —— 从裸机搭建GPU版本的深度学习环境

    之前一直在CPU上跑深度学习,由于做的是NLP方向所以也能勉强忍受.最近在做图像的时候,实在是扛不住了...还好领导们的支持买个虚拟机先体验下.由于刚买的机器,环境都得自己摸索,瞎搞过很多次,也走过很 ...

  10. 上传本地文件到github(码云)上(小乌龟方式,sourcetree方式)

    一:上传文件到 github 1.打开 https://github.com/ 登录github账号(没有的自己创建),点击右上角创建新仓库 在打开的页面中填写  名字 点击 Create repos ...