vuex数据管理-数据共享
应用场景
提供一个地址省市区地址联动操作的应用场景:在地址管理的地址修改、地址添加、选择送货区域等逻辑中,会用到该联动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数据管理-数据共享的更多相关文章
- vuex数据管理-数据模块化
对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- vuex数据管理-数据适配
由于接口在上线前,不可避免的会出现变动,小则属性名变,大则结构变化.如果处理不当,结构变化时,视图的代码也需要做相应的更改,然后就是容错方法的变动,接着重新自测等,这样,变化成本随着结构的复杂度大大加 ...
- vuex实现数据共享
1.store.js结构 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Sto ...
- part7 vuex实现数据共享
vuex 是数据框架(一个插件)(单项数据的改变流程,组件改数据必须先调Action用dispatch方法) 大型项目vue只能承担视图层的主要内容 大量数据传递的时候,往往需要一个数据框架辅助 例子 ...
- vue中vuex实现持久化的几种方法
前提:大家都知道vuex真的数据共享是不持久的,例如登录后一刷新,state中存的token就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...
- vue 项目其他规范
列表 vuex数据管理 * 数据模块化:vuex数据管理-数据模块化 数据适配:vuex数据管理-数据适配 数据共享:vuex数据管理-数据共享 路由优化 keep-alive组件设置 保留滚动位置 ...
- Vue相关问题
1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter, ...
- Vue 浅析与实践
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:曾柏羲 导语 入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新 ...
随机推荐
- POJ3046选蚂蚁创建集合_线性DP
POJ3046选蚂蚁创建集合 一个人的精力是有限的呢,如果一直做一件事迟早会疲惫,所以自己要把握好,不要一直埋头于一件事,否则效率低下还浪费时间 题目大意:一共有T(1,2...n为其种类)种蚂蚁,A ...
- 一个前端小白,关于vue\react等框架下table的应用总结
出来实习一个月多,对于前端,运用相关的最多的就是table,想总结一下先关的内容 一.table提供的功能 1.显示表 2.可编辑:分为可编辑行和可编辑块,但是原理都一样就是设置一个flag,true ...
- AutoCompleteTextView 简单用法
http://blog.csdn.net/i_lovefish/article/details/17337999
- RxSwift学习笔记3:生命周期/订阅
有了 Observable,我们还要使用 subscribe() 方法来订阅它,接收它发出的 Event. let observal = Observable.of("a",&qu ...
- hdu 1.2.8
#include<cstdio> #include<iostream> using namespace std; int pow(int a,int b) { ; while( ...
- CentOS7中配置vsftpd
1.yum -y install vsftpd 安装vsftpd 2.配置vsftpd的配置文件(/etc/vsftpd/vsftpd.conf)主要修改以下配置内容 #不允许匿名访问 anonym ...
- ArrayBlockingQueue源码解析(1)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 注意:在阅读本文之前或在阅读的过程中,需要用到ReentrantLock,内容见<第五章 Reentr ...
- 【UOJ244】 【UER #7】短路(贪心)
传送门 uoj Solution 简单题? 考虑一条路径长什么样子,一定是经过某一个字母环的左上角,那么答案就很简单了. 我们记一个前缀最小值,这样子让他一路走下去一定是最优! 然后扫一遍就好了. 代 ...
- 我的AI之路 —— 从裸机搭建GPU版本的深度学习环境
之前一直在CPU上跑深度学习,由于做的是NLP方向所以也能勉强忍受.最近在做图像的时候,实在是扛不住了...还好领导们的支持买个虚拟机先体验下.由于刚买的机器,环境都得自己摸索,瞎搞过很多次,也走过很 ...
- 上传本地文件到github(码云)上(小乌龟方式,sourcetree方式)
一:上传文件到 github 1.打开 https://github.com/ 登录github账号(没有的自己创建),点击右上角创建新仓库 在打开的页面中填写 名字 点击 Create repos ...