); ); ); history.back(); history.forward(); // 修改历史,包括二个方法pushState.replaceState二个方法(objState,title,url) history.replaceState({ color: 'red' }, 'red', 'red'); window.onpopstate = function (event) { if (event.state && event.state.color === 'red') {…
在封装自己的Vue ui库的时候,往往要封装一些比较复杂的组件,比如说table,form之类.这些组件由于功能繁杂,还涉及到子组件嵌套及通信,如果没有一套状态管理方案的话很容易导致代码难以阅读.难以维护.难以修改等问题,但引入vuex的话又过于沉重.鉴于业内已经有element-ui这样比较成熟的案例,我们可以看看element-ui是怎么在没有vuex的情况下进行状态管理的. Element-ui主要以两种形式进行状态管理:provider和自定义store.provider比较简单,父组件…
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到localStorage里面,改变vuex里的数据,便触发localStorage.setItem 方法, 实现代码: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) function storeLocalStore (state) {…
在使用echarts的时候,需要在触发click事件之后去修改实例data里面的数据,可是发现用this引用后总是出现undefined, 解决办法: myChart.on('click', (params) => { console.log(this.data);}); 用箭头的写法就可以访问了.…
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网 可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种 方法一:简单粗暴法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 例如我现在选择三个图标 点击购物车,添加至项目 为了方便可以给项目起一个名字 选…
1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 3.在vue文件中使用 <style lang='scss'> </style> 在vue项目全局中引入scss 1.全局引用时需要安装sass-resources-load…
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二来代码零散复用度不高,修改时要多处修改,漏一处就出问题,三来满足于一种简单的方式不利于深入研究技术.现在做项目需要修改使用Vuex+axios发送请求的代码时,也是把原来的代码改为自己的“保留技术”,这样很不好,所以得研究一下如何在Vue项目中更好的与后台交互. 1.修改原型链的方案 // main…
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 例如:你有几个数据,几个操作,在多个组件上都需要使用,如果每个组件都去调用都是写,就会很麻烦,代码又臭又长.当然 如果没有大量的操作和数据需要在多个…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuex之使用getters计算每一件购物车中商品的总价</title> <script src="vue.js"></script> <script src="vuex.js">&…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuex之使用getters计算每一件购物车中商品的总价</title> <script src="vue.js"></script> <script src="vuex.js">&…