2020-11-27【vue 项目实战】

本文介绍Vue项目中如何实现权限控制及组件过滤,并详细阐述了Vuex的状态管理模式及其在项目中的具体应用,包括store模块划分、actions与mutations的区别等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue 模块分包

  • copote-ui\src\api\trafficData api 调用
  • views\trafficData\trafficStatistics\index.vue 视图

vue 全局挂载组件

  • 查询
  • 重置
  • 接口调用权限

在这里插入图片描述

<!--<CustomFilterButton ref="commonFilter" @submit="queryList" @reset="resetQuery"></CustomFilterButton>-->
<template slot="left">
		<!--input  text  默认   number-->
        <el-input v-model="queryParams.projectName" clearable placeholder="请输入申请单编号"></el-input>
        <!--select > option -->
        <el-select v-model="queryParams.cityOrgCode" placeholder="请选择业务分类" clearable @change="handleDistrictCount">
          <el-option v-for="item in cityCountList"
                     :key="item.cityOrgCode" :label="item.cityOrgName" :value="item.cityOrgCode"></el-option>
        </el-select>
</template>
<template slot="right">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['visit:project:add']">新增</el-button>
</template>
export default {
  name: 'CustomFilterButton',
  props:{
    isShow:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    querySubmit() {
      this.$emit('submit')
    },
    queryReset() {
      this.$emit('reset')
    }
  }
}
.common-filter{
  margin-bottom: 10px;
  display:flex;
  justify-content: space-between;
  .el-input, .el-select,.el-cascader{
    width:198px !important;
    margin-right: 6px;
    margin-bottom: 5px;
  }
}

vuex store 使用场景

  • 在不同路由中使用同一个会改编的参数,也就是需要一个全局参数
  • 为了解决不同模块命名冲突的问题,将不同模块的做es6 导出时 namespaced:true
  • store 声明 命名空间冲突问题
  • 退出系统 跳转到登录页: this.$store.dispatch
  • 登录系统 写缓存: this.$store.commit
import Vue from 'vue'
import Vuex from 'vuex'
// 其他地方定义的 store

import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

//  vuex  stroe  语法
//  state:{} //    全局参数
// mutations:{} //  set 方法 // this.$store.commit('SET_MODULE_NAME',response.data.moduleName)
/* actions:{} //  api  调用区 this.$store.dispatch('settings/changeSetting', {}) */
//  modules:{} //  提前声明其他store文件在这引入
// getters:{} //  get 方法

const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings
  },
  getters
})

export default store

vuex dispatch/commit 调度/提交

  • dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据
  • commit:同步操作,数据提交至 mutations ,可用于登录成功后读取用户信息写到缓存里

vue 自定义指令 common / vue 指令大全

  • bind 只调用一次,指令第一次绑定到元素时调用,可进行数据初始化设置
  • inserted 被绑定元素插入父节点时调用
  • update 所在组件的 VNode 更新时调用
  • unbind 指令与元素解绑时调用
  • 使用场景: 权限判断、按钮是否可见 传入的值和 公共路由里面的权限值做匹配
 /**
 * 操作权限处理
 * Copyright (c) 2020 copote
 */
import store from '@/store'

//  el:指令所绑定的元素,可以用来直接操作 DOM 
//  binding:{name:'',value:'',oldValue:'',expression:'表达式'}
//  v-my-directive:foo  参数
//  vnode:指令所绑定的元素,可以用来直接操作 DOM 

export default {
  inserted(el, binding, vnode) {
    const { value } = binding  //  es6解构关键字  const value = binding.value
	//    const { oldValue } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

	  //  返回  true/false
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el) //   操作权限: el 是否可见
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

//  指令注册
import hasRole from './hasRole'
import hasPermi from './hasPermi'

const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}

export default install

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值