vuex

现在前端基本不是vue技术栈就是react技术栈。 vue技术栈最常用的就是element-ui的ui框架了。 在项目中，我们经常会碰到这种需求：批量上传文件 element-ui 确实也为我们提供了<el-upload>这样的组件，同事也暴露了很多的属性和方法供我们使用。 但是很多人却碰到了这样的问题：项目需求是批量上传，但是为什么自己上传的时候，也成功了，但是却是一张一张上传的，这种上传方式有时候并不违背我们的需求，但有时又不是我们需要的。那么，怎么解决批量上传并携带参数呢，我这里写了一个demo， 可供大家参考： 1 < template > 2 < div > 3 < el-form > 4 < el-form-item > 5 < el-upload 6 ref ="upload" 7 action ="/as" 8 multiple 9 :http-request ="handleUpload" 10 :auto-upload ="false" 11 :limit ="20" > 12 < el-button size ="small" type ="primary" > 点击上传 </ el-button > 13 < div slot ="tip" class ="el-upload__tip" > 只能上传jpg/png文件，且不超过500kb </ div >

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/Ka1pjJKuFwuVL8B-t7CwuA 作者：悟空中台研发团队 一、背景 通过 《揭秘 vivo 如何打造千万级 DAU 活动中台 - 启航篇》 的技术揭秘，相信我们对于 RSC 有了更多的了解。RSC(remote service component) 即远程服务化组件，通过热插拔的机制，可视化配置，即插即用，快速构建活动页面，是活动页面的核心组成单元。 RSC 是一个高效的对活动页组成单元的抽象设计方案，最大程度上提升了开发效率，降低了开发者的心智负担。我们希望开发者在开发中遵循【高内聚，弱耦合】的设计理念，只需关心 RSC 组件内部的展示和逻辑的处理。 （图1） 但在我们实际的业务开发中发现，如上图1 ，我们每天都要面对大量的相似场景，用户通过参与【大富翁游戏】获取了游戏的点数，然后【大富翁组件】就需要把游戏结果点数通知给【集卡组件】，然后【集卡组件】获取相应卡片，点击【翻卡】，通知【大富翁组件】更新剩余游戏次数。在这个活动页场景中涉及大量的组件之间的协作和数据共享。所以如果把活动看成一个小型的前端系统，RSC 只是构成系统的一个基本要素，还有一个非常重要的要素不能忽略，那就是 RSC 组件之间的连接。当然这种连接还和场景上下文相关联。所以在对 RSC

Vue.js面试题整理 一、什么是 MVVM ？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 有相同父元素的子元素必须有 独特的key 。重复的key会造成渲染错误。 最常见的用例是结合 v-for: 1 2 3 < ul > < li v-for="item in items" :key="item.id">...</ li > </ ul > 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 1 2 3 < transition > < span :key="text">{{ text }}</ span > </ transition > 当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。 2、vue中子组件调用父组件的方法 子组件调用父组件的方法可以使用this.$emit() 3、vue等单页面应用及其优缺点 优点： 1、具有桌面应用的即时性、网站的可移植性和可访问性。 2、用户体验好、快，内容的改变不需要重新加载整个页面。 3、基于上面一点，SPA相对对服务器压力小。

导航： （一）Electron跑起来 （二）从零搭建Vue全家桶+webpack项目框架 （三）Electron+Vue+Webpack，联合调试整个项目 （四）Electron配置润色 （五）预加载及自动更新 （六）构建、发布整个项目（包括client和web） 摘要 ： 上篇文章说到了如何新建工程，并启动一个最简单的Electron应用。“跑起来”了Electron，那就接着把Vue“跑起来”吧。有一点需要说明的是，webpack是贯穿这个系列始终的，我也是本着学习的态度，去介绍、总结一些常用到的配置及思路，有不恰当的地方，或者待优化的地方，欢迎留言。项目完整代码： https://github.com/luohao8023/electron-vue-template 下面开始~~~ 一、安装依赖 vue、webpack：不多说了 vue-loader：解析、转换.vue文件 vue-template-compiler：vue-loader的依赖包，但又独立于vue-loader，简单的说，作用就是使用这个插件将template语法转为render函数 webpack-dev-server：快速搭建本地运行环境的工具 webpack-hot-middleware：搭配webpack-dev-server使用，实现热更新 chalk：命令行输出带有颜色的内容 依赖包就介绍这么多

github 地址： https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目，统一管理后端接口 | 获取数据 | 请求数据，已包含vue-router，vuex，api，axios. webpack, 储存用vue-ls, 异步async/await, css less. 下载即使用项目开发。 喜欢或对你有帮助的话请点star✨✨，Thanks. A Vue.js project 使用 # 安装服务 npm install # 启动服务 npm run dev 说明 src架构 ├── App.vue ├── api │ ├── doctor.js │ └── fetch.js ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── libs │ └── util.js ├── main.js ├── router │ └── index.js ├── store │ ├── index.js │ ├── modules │ └── mutation-types.js └── views └── doctor 处理数据页面这2大块，把数据和页面分离，在vuex里面做请求数据

　　我们经常会遇到当前页面未加载完毕时跳转路由或者返回操作, 但是通过network会发现, 若网络环境较差的情况下, 会一直pending, 切换路由后在network中添加新的请求但是正在pending的请求依然存在. 当我们在项目中做了一个上拉加载分页的时候会一直加载中, 用户等待不耐烦后可能会主动触发返回操作, 但是此刻即使用户触发返回操作, 加载分页的请求还是存在, 页面还是会一直提示加载中, 直到该请求加载成功或超时才肯罢休。最终给用户造成一些不必要的结果，同时也对web性能造成一定的影响。 　　那么如何解决这个问题呢，方法就是监听路由，在路由切换前将上个页面的请求取消。 　　第一步： 　　axios请求头设置　　 import axios from 'axios' import { store } from './store' // 引入vuex axios.interceptors.request.use( config => { config.cancelToken = new axios.CancelToken(function (cancel) { store.commit('pushToken', {cancelToken: cancel}) }) return config } ) 　　第二步： 　　利用vuex，新建一个store.js，将取消方法

先说两句 上一讲 「Vuex 到底是个什么鬼」 ，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双手一起端着枪打？ 同样，我们已经知道了 Vuex 就如同一个全局的管理员一样，帮着我们统一管理着项目的共享数据，那它到底是通过什么样的方式去管理的呢？我们应该如何与这个管理员进行沟通和交流，才能有效的访问和操作这些共享数据呢？ 再说一句 Vuex 的内脏由五部分组成：State、Getter、Mutation、Action 和 Module。关于这五个部分，我会分为多个章节来进行详细阐述，这一讲就先和大家一起彻底搞定 State 和 Getter。 当然，在实际应用中，这五个部分并不是必须的，你需要用到什么就添加什么。但是一般再怎么简单的 Vuex，也至少会由 State 和 Mutation 构成，否则你就该考虑 Vuex 是否有存在的必要了。 最后，温馨提示，文档示例代码使用了 ES2015 的语法，如果你还没了解过的话，先 戳此了解了解 。 单一状态树 Vuex 使用的是 「单一状态树」 ，根据官方的描述，可能有点懵圈，不过没关系，这里我们一起来详细了解下到底什么是

先说两句 上一讲 「Vuex 到底是个什么鬼」 ，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双手一起端着枪打？ 同样，我们已经知道了 Vuex 就如同一个全局的管理员一样，帮着我们统一管理着项目的共享数据，那它到底是通过什么样的方式去管理的呢？我们应该如何与这个管理员进行沟通和交流，才能有效的访问和操作这些共享数据呢？ 再说一句 Vuex 的内脏由五部分组成：State、Getter、Mutation、Action 和 Module。关于这五个部分，我会分为多个章节来进行详细阐述，这一讲就先和大家一起彻底搞定 State 和 Getter。 当然，在实际应用中，这五个部分并不是必须的，你需要用到什么就添加什么。但是一般再怎么简单的 Vuex，也至少会由 State 和 Mutation 构成，否则你就该考虑 Vuex 是否有存在的必要了。 最后，温馨提示，文档示例代码使用了 ES2015 的语法，如果你还没了解过的话，先 戳此了解了解 。 单一状态树 Vuex 使用的是 「单一状态树」 ，根据官方的描述，可能有点懵圈，不过没关系，这里我们一起来详细了解下到底什么是

序 就在今天凌晨 4 点左右，vue-next v3.0.0-beta.1 版本发布，这意味着 Vue 3.0 全家桶正式登场，发布内容包括： vue: Beta vue-router: Alpha vuex: Alpha vue-class-component: Alpha vue-cli: Experimental support via vue-cli-plugin-vue-next eslint-plugin-vue: Alpha vue-test-utils: Alpha vue-devtools: WIP jsx: WIP 可以看到 Vue 3.0 beta 版本是一个项目系列，包含了我们在开发过程中需要的套件、webpack 插件等等，本文将带大家快速搭建基于 Vue 3.0 的项目框架，这和之前很多 Vue 3.0 的 Demo 不同，是具备商业化项目能力的框架，本文将包括以下内容： 基于 vue-cli 快速搭建 Vue 3.0 项目 Vue 3.0 基本特性体验 集成 vue-router 和 vuex 4.0 说个题外话，今天中午我搭建 Vue 3.0 项目时，发现了 vue-router-next 一个 block 级别的 BUG，想在 vue-router-next 项目 issue 中反馈时，发现已经有人提交了相似问题，随后晚上测试时，bug 已经被