关于vue.js:vuex的使用

42次阅读

共计 6510 个字符，预计需要花费 17 分钟才能阅读完成。

构造介绍

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

// login
export 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';
// element
export 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';

// permission
export 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');
    },
  }

正文完
vue.js
发表至： vue.js
2021-10-21
 0
关于vue.js:Vue基础前端工程化二
关于vue.js:vue面试考察知识点全梳理
关于vue.js:Vue源码解读二虚拟DOM与Diff算法
关于vue.js:Vue分别运用class绑定和style绑定通过点击实现样式的切换