TS + Vue 构建vuex和vue-router模块

2,166 阅读1分钟

vuex 模块

首先,我们要在store文件夹内建立几个文件

这几个文件是vuex里的几个模块,每个文件都导出一个对象; 然后在index.ts文件下引入这些对象,如下代码:

import Vue from 'vue';
import Vuex, { Commit, Dispatch } from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex);

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

然后我们在modules文件夹内创建我们需要的vuex模块,代码如下:

import {getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators';
import store from '@/stores/index';
import {ORDER_OPERATION_STATUS, ORDER_TYPE} from '@/utils/consts';

@Module({
store,
name: 'order',
namespaced: true,
dynamic: true
})
export default class OrderModule extends VuexModule {
public currentOrder: any = 1;

get ifOperational() {
  return this.currentOrder.relation_type !== ORDER_TYPE.BULK_PURCHASE
    && ![ORDER_OPERATION_STATUS.USER_CANCEL, ORDER_OPERATION_STATUS.PAY_OVERTIME]
      .includes(this.currentOrder.order_status);
}

@Mutation
public setCurrentOrder(order: any) {
  this.currentOrder = order;
}
}

export const orderMoudle = getModule(OrderModule, store);

在模块中有相对应的state mutation 等vuex拥有的功能,orderMoudle就是我们最后导出的vuex模块.在普通的代码中我们需要这样去引用,请看如下代码:

import {orderMoudle} from '@/stores/modules/order';

// 直接调用
orderMoudle.setCurrentOrder()

vue-router模块

路由这部分比较简单,直接定义几个相应的路由数组对象,然后,直接放在router对象中即可,相关代码如下所示:

import Vue from 'vue';
import Router from 'vue-router';
import MainLayout from '@/layouts/Main.vue';
import { lazyLoadTemplate } from './utils/templateView';

Vue.use(Router);

const PRODUCT = [{}, {}];

export default new Router({
    routes: [
      {
          path: 'customer',
          name: 'customer',
          component: () => import('路径'),
          meta: {
            name: ''
          }
      },
      ...PRODUCT
    ]
})