构造介绍
public：搁置一下公共文件
src：我的项目的次要构造放在这个里边
assets：公共的款式，图片文件common：公共的js文件，内部引入js文件components:我的项目要的次要页面组件locales：语言包（可换地位：比方放到assets中）vuex:我的项目状态集中管理APP.vue:我的项目主页面main.js:我的项目主函数router.js:路由文件其余文件可依据我的项目需要增删
vuex应用
type.js：次要用来寄存mutations办法中的常量
store.js:vuex的状态集中管理文件
modules:寄存各个组件的状态树
store.js
import Vue from 'vue';import Vuex from 'vuex';import VuexPersist from 'vuex-persist';import login from './modules/login';import element from './modules/element';import tree from './modules/tree';import editChart from './modules/editChart';import datasource from './modules/datasource';import upload from './modules/upload';import tabledrag from './modules/tabledrag';import permission from './modules/permission';import controlCenter from './modules/controlCenter';import editScreen from './modules/editScreen';import fullpage from './modules/fullpage';import template from './modules/template';import filter from './modules/filter';import linkage from './modules/linkage';import bigScreen from './modules/bigScreen';import dataSync from './modules/dataSync';import targetManage from './modules/targetManage';import fastAnaysis from './modules/fastAnaysis';import permissionNew from './modules/permissionNew';import sqlModel from './modules/sqlModel';Vue.use(Vuex);const vuexLocal = new VuexPersist({ storage: window.sessionStorage, modules: ['sqlModel']});const store = new Vuex.Store({ modules: { login, element, tree, editChart, upload, tabledrag, template, datasource, permission, controlCenter, editScreen, fullpage, bigScreen, dataSync, filter, linkage, targetManage, fastAnaysis, permissionNew, sqlModel }, plugins: [vuexLocal.plugin] // strict: process.env.NODE_ENV !== 'production'});export default store;type.js
// loginexport const SET_USER_INFO = 'SET_USER_INFO'; // 设置用户信息export const SET_LOGIN_STATUS = 'SET_LOGIN_STATUS'; // 设置登录状态export const SET_STORE = 'SET_STORE';export const SETROLE_AND_FETCHPERMISSION = 'SETROLE_AND_FETCHPERMISSION';// elementexport const SET_MODAL = 'SET_MODAL';// 全局modal （动静component的nama）export const SET_FILTER = 'SET_FILTER'; // 存入工夫，用于模态框全屏用export const SET_THEME = 'SET_THEME'; // 存入主题，用于全局export const SET_BIG_SCREEN_THEME = 'SET_BIG_SCREEN_THEME'; // 大屏主题export const SET_FULLPAGE_STORE = 'SET_FULLPAGE_STORE'; // 单图表组件管制全屏，并向全屏通用组件提供数据export const SET_TREE_NODES = 'SET_TREE_NODES'; // 目录树export const SET_DASHBOARD_FILES = 'SET_DASHBOARD_FILES';export const SET_FIELD_NODES = 'SET_FIELD_NODES'; // 增加图表目录树export const SET_TREE_MENU_TYPE = 'SET_TREE_MENU_TYPE'; // 增加目录树类型export const SET_UPLOAD = 'SET_UPLOAD'; // 上传export const SET_UPLOAD_IMG = 'SET_UPLOAD_IMG'; // 上传图片export const SET_REFRESH = 'SET_REFRESH'; // 是否刷新export const SET_TABLEDRAGCONFIG = 'SET_TABLEDRAGCONFIG';export const SET_FILTERINFO = 'SET_FILTERINFO';export const SET_FILTERARR = 'SET_FILTERARR';// permissionexport const UPDATE_PERMISSION_LIST = 'UPDATE_PERMISSION_LIST';export const SET_ROLE_INFO = 'SET_ROLE_INFO';export const FETCH_PERMISSION_LIST = 'FETCH_PERMISSION_LIST';export const GET_SHOW_ELES = 'GET_SHOW_ELES';export const GET_HEADER_PERMS = 'GET_HEADER_PERMS';export const SET_HEADER_PERMS_INFO = 'SET_HEADER_PERMS_INFO';export const FETCH_HEADER_PERMS_LIST = 'FETCH_HEADER_PERMS_LIST';export const IS_TEMPLATE_PREMISSION = 'IS_TEMPLATE_PREMISSION'; // 是否有获取模板的权限export const USER_TYPE_PERMISSIONLIST = 'USER_TYPE_PERMISSIONLIST'; // 依据用户类型的权限export const SET_USER_TYPE_PERMISSIONLIST = 'SET_USER_TYPE_PERMISSIONLIST'; // 设置依据用户类型的权限export const GET_USER_TYPE_PERMISSIONLIST = 'GET_USER_TYPE_PERMISSIONLIST'; // 获取依据用户类型的权限// 数据源export const SET_CUSTOMFILELIST = 'SET_CUSTOMFILELIST';// 数据同步export const SET_CLIENT = 'SET_CLIENT';export const SET_TASKSET = 'SET_TASKSET';modules/tree.js
import * as types from '../type';let fieldNode = sessionStorage.getItem('fieldNodes');let treeNodes = sessionStorage.getItem('treeNodes');let dashboardFile = sessionStorage.getItem('treeNodes');let menuType = sessionStorage.getItem('menuType');let menuCode = sessionStorage.getItem('menuCode');const state = { // 目录树以及以后节点 treeNodes: treeNodes ? JSON.parse(treeNodes) : [], fieldNodes: fieldNode ? JSON.parse(fieldNode) : [], dashboardFiles: dashboardFile ? JSON.parse(dashboardFile) : [], menuTypes: menuType || '', menuCode: menuCode || ''};const getters = { treeNodes: state => state.treeNodes, fieldNodes: state => state.fieldNodes, dashboardFiles: state => state.dashboardFiles, menuTypes: state => state.menuTypes, menuCode: state => state.menuCode};const actions = { setTreeNodes ({commit}, data) { sessionStorage.setItem('treeNodes', JSON.stringify(data)); commit(types.SET_TREE_NODES, data); }, setDashboardFiles ({commit}, data) { sessionStorage.setItem('dashboardFiles', JSON.stringify(data)); commit(types.SET_DASHBOARD_FILES, data); }, setFieldNodes ({commit}, data) { sessionStorage.setItem('fieldNodes', JSON.stringify(data)); commit(types.SET_FIELD_NODES, data); }, setMenuTypes ({commit}, data) { sessionStorage.setItem('menuType', data); commit(types.SET_TREE_MENU_TYPE, data); }, setMenuCode ({commit}, data) { sessionStorage.setItem('menuCode', data); commit('MENU_CODE', data); }};const mutations = { [types.SET_TREE_NODES] (state, res) { state.treeNodes = res; }, [types.SET_DASHBOARD_FILES] (state, res) { state.dashboardFiles = res; }, [types.SET_FIELD_NODES] (state, res) { state.fieldNodes = res; }, [types.SET_TREE_MENU_TYPE] (state, res) { state.menuType = res; }, MENU_CODE (state, res) { state.menuCode = res; }};export default { state, actions, getters, mutations};页面中应用
import {mapActions, mapGetters, mapMutations} from 'vuex';import store from '@/vuex/store'; computed: { ...mapGetters({ treeNodes: 'treeNodes', menuCode: 'menuCode' }), /** * @description 文件夹是否可拖拽disable */ dirDragableDisable () { return ( this.isDisable || !this.$_has_permission( this.$PERMISSION_TAG_LIST.DASHBOARD_EDIT_LEFTDIRDRAG ) ); }, /** * @description 看板是否可拖拽disable */ dasbboardDragableDisable () { return !this.$_has_permission( this.$PERMISSION_TAG_LIST.DASHBOARD_EDIT_FILEDRAG ); } }, methods: { ...mapMutations({ setMenuData: 'controlCenter/setMenuData' }), ...mapActions({ setTreeNodes: 'setTreeNodes', setMenuCode: 'setMenuCode', setDashboardFiles: 'setDashboardFiles' }), getMenuInfo (val) { // 获取菜单树目录 if (val !== undefined && val !== '') { store.state.tree.menuTypes = val; // 批改menutype类型 } api .getMenuInfo({menuType: this.menuTypes, requestType: 1}) .then((res) => { // console.log(res[0].children); if (res && res[0] && res[0].children && res[0].children.length > 0) { let parent = res[0]; this.toShowFile(parent, 'children'); this.menuData = parent; if (this.menuTypes === 1) { this.setDashboardFiles(this.menuData.children); } /* if (this.menuData.id === '4') { // 管理中心的左树存起暂用,与treeNodes反复，注掉了 this.setMenuData(this.menuData); } */ // 如果有id if (this.$route.query.menuCode) { this.getCurrentNode(this.$route.query.menuCode); } else { this.setFirstNode(); } this.setTreeNodes(this.menuData.children); } else { this.menuData = {children: []}; this.setMenuCode(); this.setTreeNodes([]); this.$router.push(this.$route.path); } this.$emit('initTreeComplete'); }); this.$emit('action'); }, }