2年vue项目实战经验汇总

• Module 将store分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

笔者更具实际经验总结了一套标准使用模式，就拿笔者之前的开源XPXMS举例，如下：

store目录是用来组织vuex代码用的，我将action，mutation，state分文件管理，这样项目大了之后也很容易管理和查询。接下来看看此文件是如何组织的：

// type.ts 
// 用来定义state等的类型文件
export interface State {
    name: string;
    isLogin: boolean;
    config: Config;
    [propName: string]: any;  // 用来定义可选的额外属性
}

export interface Config {
    header: HeaderType,
    banner: Banner,
    bannerSider: BannerSider,
    supportPay: SupportPay
}

export interface Response {
    [propName: string]: any;
}

// state.ts
// 定义全局状态
import { State } from './type'
export const state: State = {
    name: '',
    isLogin: false,
    curScreen: '0', // 0为pc， 1为移动
    config: {
 header: {
     columns: ['首页', '产品', '技术', '运营', '商业'],
     height: '50',
     backgroundColor: '#000000',
     logo: ''
 }
    },
    // ...
    articleDetail: null
};

// mutation.ts
import { 
    State,
    Config, 
    HeaderType, 
    Banner,
    BannerSider,
    SupportPay
} from './type'

export default {
    // 预览模式
    setScreen(state: State, payload: string) {
 state.curScreen = payload;
    },

    // 删除banner图
    delBanner(state: State, payload: number) {
 state.config.banner.bannerList.splice(payload, 1);
    },

    // 添加banner图
    addBanner(state: State, payload: object) {
 state.config.banner.bannerList.push(payload);
    },

    // ...
};

// action.ts
import { 
    HeaderType,
    Response
 } from './type'
import http from '../utils/http'
import { uuid, formatTime } from '../utils/common'
import { message } from 'ant-design-vue'

export default {
    
    setConfig(context: any, paylod: HeaderType) {
 http.get('/config/all').then((res:Response) => {
     context.commit('setConfig', res.data)
 }).catch((err:any) => {
     message.error(err.data)
 })
    },
    
    saveHeader(context: any, paylod: HeaderType) {
 http.post('/config/setHeader', paylod).then((res:Response) => {
     message.success(res.data)
     context.commit('saveHeader', paylod)
 }).catch((err:any) => {
     message.error(err.data)
 })  
    },
    // ...
};

// index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import { state } from './state';
import mutations from './mutation';
import actions from './action';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions
});

// main.ts
// 最后挂载到入口文件的vue实例上
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/';
import './component-class-hooks';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

// router.ts
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/admin/Home.vue';

Vue.use(Router);

const router =  new Router({
  mode: 'history',
  base: process.env.base_URL,
  routes: [
    {
      path: '/',
      component: Home,
      beforeEnter: (to, from, next) => {
 next();
      },
      children: [
 {
   // 当 /user/:id/profile 匹配成功，
   // UserProfile 会被渲染在 User 的  中
   path: '',
   name: 'header',
   component: () => import( './views/admin/subpage/Header.vue'),
 },

 {
   path: '/banner',
   name: 'banner',
   component: () => import( './views/admin/subpage/Banner.vue'),
 },
 {
   path: '/admin',
   name: 'admin',
   component: () => import( './views/admin/Admin.vue'),
 },
      ],
    },
    {
      path: '/login',
      name: 'login',
      component: () => import( './views/Login.vue'),
      meta:{
 keepAlive:false //不需要被缓存的组件
      }
    },
    {
      path: '*',
      name: '404',
      component: () => import( './views/404.vue'),
    },
  ],
});

// 路由导航钩子的用法
router.beforeEach((to, from, next) => {
  if(from.path.indexOf('/preview') < 0) {
    sessionStorage.setItem('prevToPreviewPath', from.path);
  }
  next();
})

export default router

// routes 配置
export default [
  {
    path: '/A',
    name: 'A',
    component: A,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/B',
    name: 'B',
    component: B,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

// 路由设置

    
 
    



    

export const isIe = () => {
    let explorer = window.navigator.userAgent;
 //判断是否为IE浏览器
    if (explorer.indexOf("MSIE") >= 0) {
 return true;
    }else {
 return false
    }
}

export function hex2Rgba(hex, opacity) {
	if(!hex) hex = "#2c4dae";
    return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + (opacity || "1") + ")";
}

// 去除html标签
export const htmlSafeStr = (str) => {
    return str.replace(/<[^>]+>/g, "")
}

export const getQueryString = () => {
    let qs = location.href.split('?')[1] || '',
 args = {},
 items = qs.length ? qs.split("&") : [];
 items.forEach((item,i) => {
     let arr = item.split('='),
  name = decodeURIComponent(arr[0]),
  value = decodeURIComponent(arr[1]);
  name.length && (args[name] = value)
 })
    return args;
}

export const paramsToStringify = (params) => {
    if(params){
 let query = [];
 for(let key in params){
     query.push(`${key}=${params[key]}`)
 }
 return `${query.join('&')}`
    }else{
 return ''
    }
}

export const toArray = (data) => {
    return Array.isArray(data) ? data : [data]
}

export const toPage = (url, params) => {
    if(params){
 let query = [];
 for(let key in params){
     query.push(`${key}=${params[key]}`)
 }
 window.location.href = `./index.html#/${url}?${query.join('&')}`;
    }else{
 window.location.href = `./index.html#/${url}`;
    }
}

export const getSubStringSum = (str = "", num = 1) => {
    let newStr;
    if(str){
 str = str + '';
 if (str.trim().length > num ) {
     newStr = str.trim().substring(0, num) + "...";
 } else {
     newStr = str.trim();
 }
    }else{
 newStr = ''
    }
    return newStr;
}

export function uuid(len, radix) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [], i;
    radix = radix || chars.length;
 
    if (len) {
      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
    } else {
      let r;
 
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';
 
      for (i = 0; i < 36; i++) {
 if (!uuid[i]) {
   r = 0 | Math.random()*16;
   uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
 }
      }
    }
 
    return uuid.join('');
}

export function formatTime(timeStemp, flag) {
    let time = new Date(timeStemp);
    let timeArr = [time.getFullYear(), time.getMonth() + 1, time.getDate()];
    return timeArr.join(flag || '/')
}

import axios from 'axios'
import qs from 'qs'

// 请求拦截
axios.interceptors.request.use(config => {
  // 此处可以封装一些加载状态
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截
axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

function checkStatus (response) {
  // 此处可以封装一些加载状态
  // 如果http状态码正常，则直接返回数据
  if(response) {
    if (response.status === 200 || response.status === 304) {
      return response.data
      // 如果不需要除了data之外的数据，可以直接 return response.data
    } else if (response.status === 401) {
      location.href = '/login';
    } else {
      throw response.data
    }
  } else {
    throw {data:'网络错误'}
  }
  
}

// axios默认参数配置
axios.defaults.baseURL = '/api/v0';
axios.defaults.timeout = 10000;

// restful API封装
export default {
  post (url, data) {
    return axios({
      method: 'post',
      url,
      data: qs.stringify(data),
      headers: {
 'X-Requested-With': 'XMLHttpRequest',
 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (res) => {
 return checkStatus(res)
      }
    )
  },
  get (url, params) {
    return axios({
      method: 'get',
      url,
      params, // get 请求时带的参数
      headers: {
 'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (res) => {
 return checkStatus(res)
      }
    )
  },
  del (url, params) {
    return axios({
      method: 'delete',
      url,
      params, // get 请求时带的参数
      headers: {
 'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (res) => {
 return checkStatus(res)
      }
    )
  }
}