1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页面中,相当于我们定义的全局变量,刷新之后,里面的数据就会恢复到初始化的状态.比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加? 2.使用场景 vuex存取值一般都是放在computed计算属性中,但是一刷新页面的数据就没了 3.思

1.node启动vue项目时地址一般都是http://localhost:8080 2.config->index.js 中的host:‘localhost’换成host:‘你的本机ip’就可以了 module.exports = { dev: { host: '192.168.1.100' } }

vue项目刷新页面时,存储在vuex中的数据会丢失,把他们存到stroage中可以保证不丢失.

vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低(1).npm uninstall webpack-dev-server(2).npm install webpack-dev-server@2.9.1(3).npm run dev==================

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.关闭谷歌浏览器的同源策略,这样就不存在跨域问题了. window 新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器 设置参数,关闭 同源策略 --a

背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE 项目中,路由是利用H5的 history ,看起来页面 url 发生了变化,其实根本就在同一个页面.简而言之,除了根路由之外的路由并不是有效的 url,所以直接刷新页面并不能 get 到对应的内容. 解决方案: 通过 nginx 配置,让所有页面回到根路由. location / { proxy_

这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了这个data.json文件 { "school":{ "students":[ { "name":"方毅", "sex":"男", "age":21, "cla

1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下更改 var appData = require('../test/data.json')// 获取数据var apiRoutes = express.Router(); //get请求apiRoutes.get('/seller',function(req,res){ res.send({ app

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据sessionstorage的特性,做一下各个方法的封装: const ls = window.sessionStorage; export default { getItem(key) { try { return JSON.parse(ls.getItem(key)); } catch (err) { ret

vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数里请求,b页面用的数据b页面的生命周期函数里请求 你需要知道JavaScript代码是运行在内存中的,代码运行时的所有变量,函数,也都是保存在内存中的.刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想储存就必须储存在外部,例如:Local Storage, Sessi

方式一.使用localStorage在数据存储 1.要在浏览器刷新的时候重新存储起来 if (window.localStorage.getItem(authToken)) { store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber')); } 方式二.使用vue-cookie插件来做存储 1.参考地址传送门 2.安装包 npm install vue-cookie --save 3.在store中存储起

第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以下内容: import Mock from 'mockjs' //引入mockjs,npm已安装import { Random } from 'mockjs' // 引入random对象,随机生成数据的对象,(与占位符@一样)Mock.setup({ timeout:1000 //设置请求延时时间}

1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-file" type="file" @change="exportData" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, applicat

今天运行项目,项目一直好好的却突然运行时报错,如下: 是引入文件报错问题,回头查看了一下文件在main.js的引入: import '@/assets/styles/custom.less'; 文件引入并没有问题. 百度了一下是说相关依赖babel-loader和vue-loader没有找到,但是npm i babel-loader vue-loader依然报错此信息. webpack的配置文件正常情况下已经配置好可以引入css,less等文件,如果出现报错有两种方式解决:第一是用src形式引入

1.在项目首页路由因需要进行传参数,例如需要重定向到:path: "/index?from=0" 2.重定向时写法如下: redirect: {path: '/index',query: {from: '0'}}

1.给el-table加上标记方法 <el-table v-loading="loading" :data="tagList1" @selection-change="handleSelectionChange1" :row-class-name="tableRowClassName">   tableRowClassName({ row, rowIndex }) {       row.index = rowIn

实现导出功能分两种,一种是客户端拿到数据做导出,第二种是服务器端处理好,返回一个数据流实现导出 第一种网上很容易找到,也很好用,本文要说的是第二种. fetchExport({ id: this.sourceId, begin: this.$route.query.begin, end: this.$route.query.end }).then(res => { const blob = new Blob([res.data], { type: 'application/vnd.ms-exce

原文地址:原文地址 1.在vue容器的div里面加上 v-cloak <div id="app" v-cloak> 2.样式文件中加上 <style type="text/css"> [v-cloak] { display: none !important; } </style>

vscode下载eslint插件 vscode进行设置 找到settings.json 在里面写入如下内容进行保存 {     "eslint.autoFixOnSave": true,     "eslint.validate": [         "javascript",         {             "language": "vue",             "autoF