个人写网站发现的一些vue中的注意事项

轮播图钩子函数清定时器要用beforeDestory，destoryed是清不了定时器的。

使用axios来代替resource

在main.js中

import axios from 'axios';

axios. defaults. withCredentials= true; //默认跨域记住session

Vue. prototype. $axios= axios;

import qs from 'qs';

不知为什么跟人家的不一样，要在vue的原型里面加入$axios才能用

this. $axios({

url: 'http://127.0.0.1/meixinvue/src/server/php/route/add_address.php',

method: 'post',

data:{

receiver : this. receiver,

},

headers:{

'content-type' : 'application/x-www-form-urlencoded; charset=UTF-8'

},

transformRequest: [ function ( data) {

data= qs. stringify( data); //把axios的json格式字符转为字符串

return data;

}]

})

. then(( res) =>{

if( res. data== 1){

alert( '增加成功');

this. getaddress();

}

})

因为post请求，其实是不需要加头部的，但是因为axios自动发的消息其实为json格式，所以要用qs来转换一次

而且要在当前的组件中引入

import qs from 'qs';

以后可以写一个http.js出来，通过引用这个http来获得数据或者请求数据

我也写了一个默认转换数据的

import axios from 'axios';

import qs from 'qs';

axios. defaults. withCredentials= true; //默认跨域记住session

axios. defaults. transformRequest = [ function ( data) {

data= qs. stringify( data); //把axios的json格式字符转为字符串

return data;

}]

Vue. prototype. $axios= axios;

Vue. use( qs);

跨域问题：

加上

axios. defaults. withCredentials= true;

之外，也可以在axios的请求里面跟headers同级的withcredentials=true；

另外php要在消息头加上

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');

header("Access-Control-Allow-Credentials: true");

再另外，因为使用this.$axios，promise会之后会把this指回全局，所以要用箭头 .then((res)=>{})

这样就能记住session，不过在浏览器里面的cookie看不到的。

使用VUEX，在main.js中

import store from './store/store';

Vue. use( Vuex)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

然后在STORE.JS中

import Vue from 'vue'

import Vuex from 'vuex'

Vue. use( Vuex)

const state = {

userinfo:{

uid: null,

uphone: null,

cartcount: 0,

},

islogin: false

}

const mutations={

login( state, userinfo){

state. userinfo. uid= userinfo. uid;

state. userinfo. uphone= userinfo. uphone;

state. islogin= true;

},

checkcart( state, cartcount){

state. userinfo. cartcount= cartcount;

}

}

export default new Vuex. Store({

state,

mutations

});

调用vuex的只需要 {{this.$store.state.islogin}}就可以了。

更新状态就是

this. $store. commit( 'login', this. userinfo);

大概是这样。

购物车的全选功能

< div class= "chose_all" >

< input type= "checkbox" class= "select_all" @click=" selectall()" v-model=" checkall" >全选

</ div >

< div class= "select" >< input type= "checkbox" class= "cart_select" v-model=" checkmodel" :value=" items" /></ div >

其实意思大概就是当用户check的时候，就会把items放进去checkmodel里面

当用户全选或者没有全选的时候

watch:{

//深度监听checkmodel是否改变

checkmodel:{

handler(){

//深度监听全选按钮的更改

if( this. checkmodel. length== this. cartlist. length){

this. checkall= true;

} else{

this. checkall= false;

};

//每一次checkmodel改变都会检测是否全选，还有执行计算总价的函数

this. totalmoney;

},

deep : true

},

}

使用监听，当checkmodel里面的长度等于cartlist的长度，就会自动把全选按钮打钩，否则取消。

省市区的下拉菜单

< div >

省份：

< select name= "new_province" class= "province" v-model=" province" >

< option >请选择 </ option >

< option v-for="( items, index) in provincelist" :key=" index" :value=" items" >{{ items}} </ option >

</ select >

城市：

< select name= "new_city" class= "city" v-model=" city" >

< option >请选择 </ option >

< option v-for="( items, index) in citylist" :key=" index" :value=" items" >{{ items}} </ option >

</ select >

街区：

< select name= "new_block" class= "block" v-model=" block" >

< option >请选择 </ option >

< option v-for="( items, index) in blocklist" :key=" index" :value=" items" >{{ items}} </ option >

</ select >

</ div >

意思大概就是当用户选中的值，就是select绑定的值

然后要在data中

provincelist:[' 北京市',' 上海市',' 广东省'], //省份列表

citylist:[], //城市列表

blocklist:[], //街区列表

province:' 请选择', //选择的省份

city:' 请选择', //选择的城市

block:' 请选择', //选择的街区

然后methods中

//根据省份更新城市

updateCity(){

this. citylist=[];

this. blocklist=[]; //每更改一次省份把原有的城市列表和街区列表清空

this. city= '请选择';

this. block= '请选择'; //如果省份改变了，把城市和街区的值变回原来

if( this. province == '北京市'){

this. citylist. push( '一环', '二环', '三环');

} else if( this. province == '上海市'){

this. citylist. push( '一海', '二海', '三海');

} else if( this. province == '广东省'){

this. citylist. push( '清远', '广州', '佛山');

}

},

//根据城市更新街区

updateBlock(){

this. blocklist=[];

this. block= '请选择';

if( this. city == '一环'){

this. blocklist. push( 'A环', 'B环', 'C环');

} else if( this. city == '二环'){

this. blocklist. push( '1海', '2海', '3海');

} else if( this. city == '三环'){

this. blocklist. push( 'A远', 'B州', '3山');

} else{

this. blocklist. push( '太多', '不全输入了')

}

},

然后利用监听属性，当用户改变的的时候

watch:{

'province' : 'updateCity', //监听省份更新

'city' : 'updateBlock' //监听城市更新

}

要更新一次函数就可以了

好累，不打了。