vuex

遇到的bug bug：在vue.config.js里配置proxy，并修改请求的url后仍无法连接到后端。 解决： url最后忘了'/'，导致和后端不匹配，会有404、500等错误。 后端服务未打开或出现其他错误，也会报code为500的错。 api中添加request，记得修改url和baseURL（默认是/dev-api，改成空），否则在请求的url中间会多一个/dev-api，取不到数据。 bug：添加了注册页面，但进行跳转时还是会自动重定向到login页面。 解决：和vue-element-admin的架构有关，需向src/permission.js的白名单（whiteList）中添加注册的路由项。 bug：页面刷新后vuex存储的数据被清空。 解决：这和vuex的机制有关，vuex的数据保存在运行内存中，当页面刷新时会重新加载vue实例，vuex里的数据会被重新赋值。 所以解决办法是把数据存到cookie中，vuex每次从cookie中获取数据进行更新。 bug：日历无法渲染事项。 解决：利用Chrome的开发者平台debug。 bug：事项详情页未对空值进行处理。 解决：学习并添加了表单校验规则。 bug：后端处理GET类请求时需要知道参数。 解决：在url中识别参数并将参数传给对应的处理函数。 场景测试 场景1 用户信息 用户情况 姓名 小A 用户身份

前言 vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛的应用，与此诞生的优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。 笔者最初接触vue时也是使用的iview框架，亲自体会之后确实非常易用且强大。 笔者曾经有两年的vue项目经验，基于vue做过移动端项目和PC端的ERP系统，虽然平时工作中采用的是react技术栈，但平时还是会积累很多vue相关的最佳实践和做一些基于vue的开源项目，所以说总结vue的项目经验我觉得是最好的成长，也希望给今年想接触vue框架或者想从事vue工作的朋友带来一些经验和思考。 你将收获 vue框架使用注意事项和最佳经验 vue项目配置经验总结 vue组件设计经验总结 vue项目架构与服务化探索 正文 本文不仅仅是总结一些vue使用踩过的一些坑和项目经验，更多的是使用框架（vue/react）过程中的方法论和组件的设计思路，最后还会有一些个人对工程化的一些总结，希望有更多经验的朋友们可以一起交流，探索vue的奥妙。 在开始文章之前，笔者建议大家对javascript, css, html基础有一定的了解

做项目的时候发现如果子组件在页面比较靠上，子组件渲染的时候父组件还未取到值，导致子组件取不到数据 原因：子组件created和mounted 只执行一次 ， 在父组件初始化时，已经给子组件传了一个空值，导致异步请求数据发生变化时，子组件的值不再变化。 computed: { menuData() { let icons = ["el-icon-setting","fa fa-database","el-icon-coin"]; //return this.$store.state.menuData; let arr = this.$store.state.menuData; for (let i = 0; i < arr.length; i++) { arr[i].icon = icons[i]; } console.log(arr); return arr; } } <head-search :navMenus="menuData"></head-search> 子组件 props: { navMenus: Array }, data() { return { headMenus: [], headSearch: "" }; }, created() { let tepArr = []; this.sortData(this.navMenus, tepArr); this

VUE 1.什么是 vue 生命周期 2.vue生命周期的作用是什么 3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解？ vue路由面试题 mvvm 框架是什么？ vue-router 是什么?它有哪些组件 active-class 是哪个组件的属性？ 怎么定义 vue-router 的动态路由? 怎么获取传过来的值 vue-router 有哪几种导航钩子? 6.$route 和 $router 的区别 7.vue-router响应路由参数的变化 8.vue-router传参 9.vue-router的两种模式 10.vue-router实现路由懒加载（ 动态加载路由 ） vue常见面试题 1.vue优点 2.vue父组件向子组件传递数据？ 3.子组件像父组件传递事件 4.v-show和v-if指令的共同点和不同点 5.如何让CSS只在当前组件中起作用 6.<keep-alive></keep-alive>的作用是什么? 7.如何获取dom 8.说出几种vue当中的指令和它的用法？ 9. vue-loader是什么？使用它的用途有哪些？ 10.为什么使用key 11.axios及安装 12.axios解决跨域 13.v-modal的使用 14

　　Vue Cli3出来也一段时间了，我想尝试下Vue结合TypeScript搭建个工程，感受下Vue下用TS...网上有一篇讲的非常详细的教程 vue-cli3.0 搭建项目模版教程（ts+vuex+axios） 作者： 陈小生_1017 　　我看完教程后（好长的一篇博文，不得不服作者的用心，赞！），我去博主留的git地址 https://github.com/chenfangsheng/vue-cli3-tpl.git 克隆一份下来，安装完依赖后，发现好多错误...汗...我在原博客评论区和git issue区均为发现问题的解决办法，我尝试着一番google后，项目能跑起来了，顺便研究了下vuex-class的用法，下面会贴出具体的用法。出现的错误有： 　　1.引入scss的路径不对，按照下边改为相对路径就可以了 // vue-cli3-tpl/src/components/test/test.vue ... <style lang="scss"> /* @import "@/assets/scss/variables"; */ @import "../../assets/scss/variables" ; .test - wrap { width: 100% ; color: $background - color; } </style> // vue-cli3-tpl

关于后台管理系统的路由，想花一点时间，彻底的整理一份实现动态路由的点点滴滴。 首先声明，这篇文章是基于花裤衩大神的《手摸手，带你用vue撸后台》，在他项目的基础上，帮助想要实现动态路由的小伙伴，来写的一篇使用笔记。 segmentfault.com/a/119000000… 为什么要实现动态路由? 我们在开发后台管理系统的过程中，会有不同的人来操作系统，有admin（管理员）、superAdmin(超管)，还会有各种运营人员、财务人员。为了区别这些人员，我们会给不同的人分配不一样的角色，从而来展示不同的菜单，这个就必须要通过动态路由来实现。 主流的实现方式： 简单聊一下两种方式的优势，毕竟如果你从来没做过，说再多也看不明白，还是得看代码 前端控制 1、不用后端帮助，路由表维护在前端 2、逻辑相对比较简单，比较容易上手 复制代码 2、后端控制 1、相对更安全一点 2、路由表维护在数据库 复制代码 一、前端控制 花裤衩大神的方案是前端控制，他的核心是通过路由的meta属性，通过role来控制路由的加载。具体的实现方案： 1、根据登录用户的账号，返回前端用户的角色 2、前端根据用户的角色，跟路由表的meta.role进行匹配 3、讲匹配到的路由形成可访问路由 复制代码 具体的代码逻辑： 1、把静态路由和动态路由分别写在router.js 2、在vuex维护一个state

接着前面的内容： https://www.cnblogs.com/yanggb/p/12682902.html 。 状态管理 类Flux状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中，大型应用的复杂度也经常逐渐增长。为了解决这个问题，vue提供了vuex：受到Elm启发的状态管理库。vuex甚至被集成到vue-devtools中，无需配置即可进行时光旅行调试（time travel debugging）。 如果你是来自React的开发者，你可能会对vuex和redux之间的差异表示关注。redux是react生态环境中最流行的flux实现，redux事实上无法感知视图层，所以它能够轻松地通过一些简单的绑定与vue一起使用。vuex的区别在于它是一个专门为vue应用设计的状态管理工具，使得它能够更好地与vue进行整合，同时提供简洁的api和改善过的开发体验。 简单状态管理起步使用 一个经常被忽略的细节是，vue应用中原始的data对象的实际来源——当访问数据对象的时候，一个vue实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享： var sourceOfTruth = {} var vmA = new Vue({ data: sourceOfTruth }) var vmB = new Vue({ data

下面进入正文，本文会列举一些平时面试时问到的问题和答案，并说明我在当时问到这个问题时所期望对方的回答： vue生命周期（钩子函数） 问题 请说一下vue的生命周期函数（钩子函数）。 问题描述 首先关于生命周期函数，一般我的第一个问题就是这个，我认为是每个使用vue的都要清楚的，如果这个问题答的问题很大其实我都不太想继续往下进行了。 即使英语不标准（我就是不标准的人，并不是说这是个问题）也要去把关键点说清楚，哪个地方有ed哪个地方没有ed其实是很关键的，或者可以手写下来，因为常用的就是created和mounted所以前4个可以清楚的手写出来并不难，后面4个不去详细说明都没事。（我自己工作中基本没用过后面4个） 在哪个周期能够首次拿到data数据和在哪个周期能够首次拿到mounted中的dom元素，如果没有说到这个问题，我一般会一直往下问，直到他说出来这两个答案。 期望答案 beforeCreate、created（此时需说明可以在created中首次拿到data中定义的数据）、beforeMount、mounted（此时需说明dom树渲染结束，可访问dom结构）、 beforeUpdate、updated、beforeDestroy、destroyed computed中的getter和setter 问题 说一下computed中的getter和setter。 问题描述 很多情况

一、项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例，实现消息发送/动态表情，图片/视频预览，拖拽图片/粘贴截图发送，朋友圈/红包/换肤等功能。 二、效果图 三、技术栈 框架技术：electron + electron-vue + vue 状态管理：Vuex 地址路由：Vue-router 字体图标：阿里iconfont字体图标库 弹窗插件：wcPop 打包工具：electron-builder 环境配置：Node.js + Chromium 图片预览：vue-photo-preview 视频组件：vue-video-player 如何配置开发环境及使用electron-vue，这里不作多介绍，可查阅官网及搜资料 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ https://github.com/SimulatedGREG/electron-vue 注意： 由于electron-vue作者长时间未更新，里面electron版本v2.0.4太旧，如遇问题，可升级到最新版本 ◆ Electron主进程index.js 通过BrowserWindow创建和控制浏览器窗口

VUE疑难问题---3、vue结构图 一、总结 一句话总结： vuex中的state帮外部组件管理数据，mutations负责修改state中的数据，actions负责执行外部组件的方法并且操作vuex中的mutations来更新state，getters对state数据进行修饰方便外部组件调用 1、vuex中发送和接收后端ajax数据的是哪个版块？ 是actions，我们可以在actions中发送和接收后端ajax数据 2、组件中获取vue中的数据（状态）有哪些方式？ 可以直接从state中拿，也可以从getters中 间接的拿 3、vuex的简写方式？ 可以用mapState、mapActions、mapGetters等来代替this.$store.state、this.$store.dispatch、this.$store.getters等，这样可以极大的简化代码 < template > < div > < div > click {{count}} times, count is {{evenOrOdd}} </ div > < button @click ="increment" > + </ button > < button @click ="decrement" > - </ button > < button @click ="incrementIfOdd" >