Vue

Posted 2020-09-24

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;
    }
}