1、后台返回的数据 { path: ''/fbgq'', name: ''fbgq'', component: () => import(''../view part/fbgq.vue''), meta: { title: ''发布供求'', ...[2019/11/12]

1、首先需要装vuex npm install vuex -d 2、新建store文件夹，新建index.js， 并引入vue、vuex,代码如下： import Vue from ''vue'' import Vuex from ''vuex'' Vue...[2019/11/12]

通过vuex 存储 1. 创建store.js文件 import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(Vuex); const state = { 要设置的全局访问的state对象 coun...[2019/11/12]

整体思路： 前台获取用户数据，向后台发送post请求，验证成功后 前台接受数据，改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求，若成功返...[2019/11/12]

首先，我们要安装vuex，执行命令yarn add vuex 1.编写state数据 vuex/index.js import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(Vuex); const state ...[2019/11/12]

1.在login.vue中通过发送http请求获取token 根据api接口获取token var url = this.HOST + " e ion"; this.$axios.post(url, { username: this.loginForm.username,...[2019/11/12]

1. 在router/index.js进行验证 2. 代码如下： import Vue from ''vue'' import Router from ''vue-router'' import Login from ''@/component common/Login''; ...[2019/11/12]

今天给大家写一篇关于vue校验登录状态，如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫，它的原理是每次路由发生变化时触发具体写法如下： router.beforeEach((to, from, next) => { next() }) befor...[2019/11/12]

vue 更改连接后台的api，是更改在config文件夹下的index.js文件中的proxyTable的值。 如下代码，其中 10.1.166.88:8888 pringTimes 为后台暴露出来的appi。 dev: { env: require(''./dev.e...[2019/11/12]

用过vuex的肯定会有这样一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉，因为我们的state都是存储在内存中的。 所以我们通过 vuex-persistedstate这个插件，来实现将数据存储到本地 用法很简单 1、 npm install vuex...[2019/11/12]

mutation文件 import { RECEIVE_PUBLICHTIT } from ''./mutation-types'' 保证刷新页面数据不消失* function storeLocalStore (state) { window.localStora...[2019/11/12]

众所周知，在组件式开发中，最大的痛点就在于组件之间的通信。在 Vue 中，Vue 提供了各种各样的组件通信方式，从基础的 prop $emit 到用于兄弟组件通信的 EventBus，再到用于全局数据管理的 Vuex。 在这么多的组件通信方式中，provide/inject 显得十分阿卡林...[2019/11/11]

路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path==''/login'' || localStorage.getItem(''token'')){ next(); }else{ ...[2019/11/8]

今天在写vuex的时候遇到了一个特别无语的问题，找了半个小时才找到这个问题，所以贴出来，大家在遇到和我一样的问题的时候不会太过慌张 在第一次写vuex的时候无论如何获取不到$store，后来找了好久才发现是我给全局VUE注入的时候注入的是Store而非store 这一个字母之差看上去可能没...[2019/11/8]

子组件： props:[''myDetail''] 父组件： <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XX...[2019/11/8]

一、状态管理（vuex）简介 vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、...[2019/11/8]

1.采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, 2.通过watch来检查定义计算属性获取到的值的变化 ...[2019/11/8]

一. 新建一个Vue实例可以有下列两种方式： 1.new一个实例 var app= new Vue({ el:''#todo-app'', 挂载元素 data:{ 在.vue组件中data是一个函数，要写成data () {}这种方式 items:[''ite...[2019/11/8]

最近使用在学习使用vuex，想利用vuex集中管理状态。在和后台进行数据交互的时候，必然会涉及接口的调用，此类异步操作，通常写在action里面： import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(''Vue...[2019/11/8]

我废话不多说了，直接上代码吧！ actions.js getCertificationStatus(context, {vm:vm,type:type}){ return new Promise((resolve, reject) => { axios.p...[2019/11/8]

介绍 笔者在浏览Github时发现一个有趣的项目，因为最近在学习Vue，在Vue板块中发现了这样的一个项目，觉得比较还比较有意思，因此在本文中分享给大家，共同学习和进步！本文内容来源于Github！ Github https: github.com/lcs1998/HappyEliminate效果展...[2019/11/8]

vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app...[2019/11/7]

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素） 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods 添加ref属性 ...[2019/11/7]

前言 在vue项目中组件之间的通讯是很常见的问题，同时也是很重要的问题，我们大致可以将其分为三种情况： 父传子：在父组件中绑定值，在子组件中用props接收 子传父：在父组件中监听一个事件，在子组件中利用$emit触发这个事件并带上数据作为第二个参数，这时父组件中监听事件的回调函数就会...[2019/11/7]

在项目的package.json中可以找到如下代码 start属性指定的文件就是通过开发模式启动的服务文件 "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js"...[2019/11/7]

获取服务器传来的数组数据进行，找出其中价格相同的进行数量相加，合并该段数据： /** 先将传来的订单列表进行四舍五入，再将价格相同的订单进行合并 * @param {Object} orderList :要进行操作的订单 */ async mergeOrder(orde...[2019/11/7]

看到这个标题好像很简单，onblur、onchange事件都能做到，但是用户体验感貌似很差。查了下百度查不到资料了。看了下vue的基础，发现 vue 有个 watch 监听器好吧，从这里入手 用v-model 加watch 就可以很简单的实现这一个功能。 ----代码省略 ...[2019/11/6]

actions异步修改状态与mutations同步修改状态是两个容易混淆的概念，因为两者在执行上，很难测试出两者的差别，而我们要区别它们两，首先你得区分同步与异步，我的理解是，同步更像是一条流水线作业，而异步则更像是多条，例子你比如打电话，我们通常是我打给我妈，打完之后，再跟我爸打，而异步更像是某...[2019/11/6]

我们在写vue项目中如果，我们发现vuex中<button @click="$store.commit(''jia'')">-</button>是十分麻烦的，我们想直接写成@click中的jia，我们应该如何处理？ 我们可以想一想我们在解决state时是如何解决的，为此...[2019/11/6]

getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样，实际上它们是有区别的： getters比较死板，如果你的百度钱包只有在金额为100才能提现，那么你在写提现页面，它是早已固定好的，而Mutation不一样，当你点击百度钱包提现，你哪怕是一元，它只要你点击了便可以提现...[2019/11/6]

html <input type=''text'' :value=''num''> <button @click=''add''> + </botton> js data(){ return{ } }, me...[2019/11/6]

1.main.js /* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { ...[2019/11/6]

判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) <keep-alive exclude="needExcludeComponentName"> <router-view></router-vie...[2019/11/6]

$emit(update: prop, "newPropVulue") 这个模式，使子组件向父组件传达：更新属性，并抛出新的属性值 .sync 修饰符 是父组件中修改prop值得修饰符 一：什么地方需要用到.sync修饰符呢 当子传父，父级有两数据，而没有v-modal时 例...[2019/11/6]

移动端通常对于input标签要求输入有一些校验，vue的指令可达到完美校验的作用 预期效果 <input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" /> ...[2019/11/6]

项目背景 在主文件index.vue中初始化页面相关的操作， 在mounted中放置用户权限判断并更新store中的权限值，当点击相应组件时mounted可正常工作， 但是在用户手动刷新时mounted内的函数并未执行，导致相应组件未获取到权限而显示异常 问题解决 首先，这跟v...[2019/11/6]

如下所示： data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用th...[2019/11/6]

通过watch将orderDetailsData对象赋值给data中的consignee对象，这样能将操作能避免v-model修改时，直接改动vuex中的值。 <template> <input type="text" placeholder="请输入收货人名字"...[2019/11/6]

这是因为在vue.js 里面的ajax.js文件内对数据进行了深度解析了，我们只需要 let axios = Axios.create({ baseURL: ''http: 127.0.0.1:8761/'', headers: {''X-Requested-With'':...[2019/11/6]

我需要在搜索页拿到结果之后跳转到搜索结果页并携带搜索结果 尝试过几种方法之后最终采用vuex+se ionStorage结合的方法在mutations中 setResultValue(state,flag){ se ionStorage.setItem("resultValue...[2019/11/6]

固定路由的面包屑导航 我们在配置router的时候，可以将面包屑数据配置在meta中， 例如 路由配置： { path: ''/project/proce :id'', name: ''proce '', component: () => impor...[2019/11/5]

$route.fullPath 1 路由是：/path/:type真正路径是：/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new Vue...[2019/11/5]

vue 2.0 从接口中获取数据 <template> <div id="admins"> <h1>I am a title.</h1> <a> written by {{ author }} </a&g...[2019/11/5]

使用场景： 　　在项目开发中，后端需要处理一连串的逻辑，或者等待第三方的数据返回来进行处理之后在返回给前端，可能时间会很长，而且前端也不知道后端什么时候能处理好（时间长的话会达到10分钟左右），如果采用普通的HTTP连接，前后端无法一直保持联系，麻烦的时候可能还需要采用轮询的机制，所以使用We...[2019/11/5]

本文实例讲述了Vue图片浏览组件v-viewer用法。分享给大家供大家参考，具体如下： v-viewer 用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，基于viewer.js。 从0.x迁移 你需要做的唯一改动就是手动引入样式文件： import ''viewe...[2019/11/4]

概述 当两个组件之间没有任何父子关系时，利用Vue标准的props传值和emit触发事件无法解决他们之间通信的问题。最近做的项目使用的是eventemitter2，来实现不相关组件之间的通信。这篇文章分享的是我对eventemitter2使用的总结和体会。 eventemitter2的...[2019/11/4]

1.index.js 配置子路由children。 import Vue from ''vue'' import Router from ''vue-router'' import SingerDetail from ''component inger-detail inger-d...[2019/11/1]

最近在用Vue做评论互动的时候用到了push，因为项目是迭代开发，所以现在做一个简易的demo回顾下 <template> <div> <ul v-for="(item , index) in list" :key="index"> ...[2019/11/1]

比如 ： http: localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#，只需将mode的默认值''hash''改为''history''即可。 router.js : import Router from ''vue-router'' imp...[2019/11/1]

前言 由于大部分移动端的组件库都不提供表单校验，因此需要自己封装。目前，使用较多的是async-validator和vee-validator。其中，elementUI组件库提供的表单验证也是基于async-validator，vee-validator是一种基于vue模板的轻量级校验框架。可...[2019/11/1]