标签：获取数据 host comm cat ons from ams null logs
1.Vue单页面使用路由
1>跳转路由给url中添加参数：router.push({ name: ‘Paymethod‘, query:{m:true}});
2>跳转后获取url中的参数：this.$route.params.query.m.
3>vuex中有四个文件：action.js----->mutations.js----->state.js----->store.js
步骤一：在store.js中定义好状态树
export default {
menu:null
}
步骤二：将state、action.js、mutations.js引入到store.js
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import actions from ‘./actions‘
import mutations from ‘./mutations‘
import state from ‘./state‘
Vue.use(Vuex)
export default new Vuex.Store({
strict: process.env.NODE_ENV !== ‘production‘,
state,
actions,
mutations,
})
步骤三：action.js发送请求，获取数据提交到mutation.js
import config from ‘../config‘
import fetch from ‘isomorphic-fetch‘
export default {
getMenu(context, orgType) {
fetch(`${config.devHost}/user/menu`, {
method: ‘GET‘,
credentials: ‘include‘
})
.then(response => response.json())
.then(response => {
if(response.code === ‘A00000‘){
context.commit("getMenu", response.data);
}else{
context.commit("getMenu", {‘msg‘ : ‘error‘});
}
})
.catch(error => {
context.commit("getMenu", {});
})
}
}
步骤四：获取到action.js提交过来的数据,修改state.js中状态树中的state
export default {
getInfo(state, menu){
state.menu = menu;
}
}
4>在组件中watch和computed的配合使用：
data() {
return {
menuArr:[] //菜单
}
},
beforeCreate(){
this.$store.dispatch(‘getMenu‘);
},
watch: {
menu:{
handler(menu){
this.menuArr=menu.menu;
},
deep: true
}
},
computed: {
route(){
return this.$route;
},
menu(){
return this.$store.state.menu;
}
}
标签：获取数据 host comm cat ons from ams null logs
原文地址：http://www.cnblogs.com/widem/p/7067652.html
