码迷,mamicode.com
首页 > 其他好文 > 详细

Vue

时间:2017-06-22 23:57:53      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:获取数据   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;
    }
}

  

 

  

Vue

标签:获取数据   host   comm   cat   ons   from   ams   null   logs   

原文地址:http://www.cnblogs.com/widem/p/7067652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!