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
]
})