vue 重点代码

1 全局过滤器

import * as filters from './filters' // global filters

// register global utility filters.

Object.keys(filters).forEach(key => {

  Vue.filter(key, filters[key])

})

 

2  不引入式转出

export { parseTime, formatTime } from '@/utils'

 

3  （不校验） 最简实例

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

 

4 Bus 模块

import Vue from 'vue'

const Bus = new Vue()

export default Bus

 

使用

import Bus from '@/utils/Bus'

 

  created() {

    Bus.$on('reloadUserMan', (res) => { // 重载当前列表

      this.getPageList()

    })

    this.getPageList()

  },

 

Bus.$emit('reloadUserMan', '修改成功')

 

 

5 异步触发全局状态

          store.dispatch('FedLogOut').then(() => {

            location.reload()// 为了重新实例化vue-router对象 避免bug

          })

 

6  返回异步错误状态

return Promise.reject(response.data)

 

7 导入默认、部分

import axios from 'axios'

import { Message, MessageBox } from 'element-ui'

 

8 全局状态部分代码

1  index.js
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import permission from './modules/permission'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    permission,
    user
  },
  getters
})

export default store

2  getters

const getters = {
  pageSize: state => state.app.pageSize,
  token: state => state.user.token,
  userInfo: state => state.user.userInfo,
  roles: state => state.user.roles,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters,
  menuCodes: state => state.permission.menuCodes
}
export default getters


3  modules
user.js
import { login, getInfo } from '@/api/user'
import { getToken, setToken, removeToken, setUserInfo, getUserInfo, removeUserInfo } from '@/utils/auth'

const user = {
  // namespaced: true,未使用命名空间，mutations，actions请不要重名
  state: {
    token: getToken(),
    userInfo: getUserInfo(),
    userId: '',
    roles: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo.userBase
    },
    SET_ID: (state, userId) => {
      state.userId = userId
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },

  actions: {
    setLoginInfo({ commit }, userInfo) {
      commit('SET_USERINFO', userInfo)
    },
    // 登录
    Login({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const data = response.payload;
          setToken(data.token);
          commit('SET_TOKEN', data.token);
          setUserInfo(data);
          commit('SET_USERINFO', data);
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          const data = response.payload
          commit('SET_USERINFO', data)
          setUserInfo(data)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 前端 登出
    FedLogOut({ commit }) {
      // return new Promise(resolve => {
        commit('SET_TOKEN', '')
        commit('SET_ROUTERS', [])
        removeToken()
        removeUserInfo()
      //   resolve()
      // })
    }
  }
}

export default user

 9  request 

import axios from 'axios'
import qs from 'qs'
import { Message, MessageBox } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function(data) {
    // Do whatever you want to transform the data
    return qs.stringify(data)
  }],
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000, // 请求超时时间
  responseType: 'json'
})

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-USER-TOKEN'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非200是抛错 可结合自己业务进行修改
  */
    const res = response.data
    if (Number(res.code) !== 200) {
      Message({
        message: res.msg,
        type: 'error',
        duration: 5 * 1000
      })
      //  token  失效|错误|没有
      if (res.code === 401) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload()// 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject(response.data)
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

10  引入图片

import dcname from '@/assets/dc-name.png'

  data() {

    return {

      dcname

    }

  },

 

11 引入组件

import SidebarItem from './SidebarItem'

components: { SidebarItem },

        <sidebar-item :routes="permission_routers"></sidebar-item>

 

12  全局状态调用

  computed: {

    ...mapGetters([

      'permission_routers'

    ])

  }

 

13  图片

background: url(~@/assets/fanhui.png)no-repeat center;

 

14 命名模块

export { default as Sidebar } from './Sidebar'

15