vue全家桶router、vuex、axios

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'
import Axios from 'axios'

Vue.prototype.$axios=Axios

Axios.defaults.baseURL="http://www.wwtliu.com"

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,
    components: {App},
    template: '<App/>'
})

一、router

import Vue from 'vue'
import Router from 'vue-router'
import all from '@/components/all'

Vue.use(Router)

const router = new Router({
  mode: "history",//nginx需配置：server{location / {try_files $uri $uri/ /index.html;}}
  routes: [
    {
      path: '/',
      redirect: "/all"
    },
    {
      path: '/all',
      component: all
    },
    {
      path: '/all/:data',
      component: all
    },
    {
      path: '/all',
      component: all,
      children: [
        {
          path: '/all/first',
          component: first,
        },
        {
          path: 'second',
          component: second,
        }
      ]
    }
  ]
})

export default router;

<router-link to="/all" tag="li">全部</router-link>

<router-view/>

this.$router.push({name:'',path:'',query:{data:''},params:{data:''}})

this.$route.query.data
this.$route.params.data

路由守卫：

beforeRouteEnter(to,from,next){
    if(false){
        next();
    }else{
        next("/login");
    }
}

router.beforeEach((to,from,next)=>{
    if(to.path=="/info" && false){
        next()
    }else{
        next("/login")
    }
})

路由监听：

watch: {
  "$route.path": function () {
  }
},

二、vuex

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        list:[]
    },
    mutations: {
        add(state,arg){
            state.list.push(arg);
        }
    },
    getters:{
        activelist(state){
            return state.list.filter(item=>item.tasksty)
        }
    },
    actions:{
        //异步处理
        saveDataAction(arg_store,data){
            arg_store.commit('add',data);
        }
    }
})

export default store;

this.$store.dispatch("saveDataAction",'data_data_data');

<input type="text" placeholder="你打算做什么？"  @keyup.enter="modelvalue">

methods:{
    modelvalue(ev){
        this.$store.commit("add",{taskval:ev.target.value,tasksty:false});
    }
}

<li v-for="li in list"></li>
<li v-for="li in activelist"></li>

import {mapState,mapGetters} from "vuex"
computed:{ 
    ...mapState(["list"]),
    ...mapGetters(["activelist"])
}

vuex持久化

1、安装
  npm i -S vuex-persistedstate
2、配置
  import persistedState from 'vuex-persistedstate'
  const store = new Vuex.Store({
    plugins: [persistedState({storage: window.sessionStorage})]
  })

vuex命名空间

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

let storemodule = {
    namespaced: true,
    state: {
        storemodulestate: ""
    },
    mutations: {
        setStoremodulestate(state, arg) {
            state.storemodulestate = arg
        }
    },
    getters: {
        getStoremodulestate(state) {
            return state.storemodulestate
        }
    }
}

export default new Vuex.Store({
    modules: {storemodule}
})

<template>
    <div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"

    export default {
        name: "index",
        computed: {
            ...mapGetters({
                storemodulestate: "storemodule/getStoremodulestate",
                modulestate: "storemodule/getStoremodulestate"
            })
        },
        mounted() {
            console.log(this.storemodulestate)
            this.$store.commit("storemodule/setStoremodulestate", "setStoremodulestate")
            console.log(this.modulestate)
        }
    }
</script>

<style scoped>

</style>

三、axios

this.$axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
}, {
  headers: {
    'token': ''
  },
  responseType: 'blob'
}).then(function (response) {
  console.log(response);
  let blob = new Blob([response.data], {type: "application/vnd.ms-excel,charset=utf-8"});
  let link = window.URL.createObjectURL(blob);
  let element = document.createElement("a");
  element.href = link;
  element.download = "文件名.xlsx";
  document.body.appendChild(element);
  element.click();
  window.URL.revokeObjectURL(link);
  document.body.removeChild(element);
}).catch(function (error) {
  console.log(error);
});

this.$axios.get('/user', {
  headers: {
    'token': ''
  },
  responseType: 'blob',
  params:{
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

this.$axios.interceptors.request.use(req => {
    return req;
},err => {
    return Promise.reject(err);
})

this.$axios.interceptors.response.use(res => {
    return res;
},err => {
    return Promise.reject(err);
})