vue版本: 2.5.2
首先说一下Vuex是什么：
官方定义Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。更多内容前往vue中文文档
它的应用场景是：
1.多个视图依赖于同一状态。
2.来自不同视图的行为需要变更同一状态。
简单点理解它就是一个存储仓库，存储着多个视图（或组件）共用的数据（或状态），并且多个视图共同维护并使用该数据。

1.安装vuex

在package.json中定义引入vuex

    "vuex": "^3.0.1",

$ npm install安装

2.定义vuex实例

在src目录下store目录中新建index.js文件
在文件中导入vue, vuex等, 并让vue引用vuex

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({strict: true,modules: {user},getters
})
export default store

3.导入store

vue项目入口文件main.js中导入store并将其传入vue实例

import store from './store'
// ...
new Vue({ // eslint-disable-lineel: '#app',router,store,i18n,template: '<App/>',components: { App }
})

4.定义用户角色存储

新建src/store/modules/user.js用于管理与用户相关的值:

import { login} from '@/api/login'
import {getToken,setToken,removeToken,getUserInfo,setUserInfo
} from '@/utils/auth'let userAvatar = ''const user = {state: {token: getToken(),username: '',avatar: '',roles: ['admin']},mutations: {SET_TOKEN: (state, token) => {state.token = token},SET_USERNAME: (state, username) => {state.username = username},SET_AVATAR: (state, avatar) => {state.avatar = avatar},SET_ROLES: (state, roles) => {state.roles = roles}},actions: {// 登录Login ({ commit }, userInfo) {const params = {username: userInfo.username.trim(),password: userInfo.password}return new Promise((resolve, reject) => {login(params).then(response => {const result = response.resultuserAvatar = (result.img && result.img.indexOf('http') === 0) ? result.img : userAvatarsetToken(result.token)setUserInfo({token: result.token,username: result.email,avatar: userAvatar || './static/avatar.png'})commit('SET_TOKEN', result.token)commit('SET_USERNAME', result.email)commit('SET_AVATAR', userAvatar)// admincommit('SET_ROLES', ['admin'])resolve()}).catch(error => {reject(error)})})},// 前端 退出登录FedLogout ({ commit }) {return new Promise(resolve => {commit('SET_TOKEN', '')commit('SET_USERNAME', '')commit('SET_AVATAR', '')setUserInfo()removeToken()resolve()})}}
}export default user

5.自定义指令

新建目录src/directive/permission
在其目录下新建 index.js 与 permission.js
在permission.js中定义指令核心逻辑

import store from '@/store'function checkPermission(el, binding) {const { value } = bindingconst roles = store.getters && store.getters.rolesif (value && value instanceof Array) {if (value.length > 0) {const permissionRoles = valueconst hasPermission = roles.some(role => {return permissionRoles.includes(role)})if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el)}}} else {throw new Error(`need roles! Like v-permission="['admin','editor']"`)}
}export default {inserted(el, binding) {checkPermission(el, binding)},update(el, binding) {checkPermission(el, binding)}
}

在index.js中以directive的形式导入vue, 并将permission指令导出:

import permission from './permission'const install = function(Vue) {Vue.directive('permission', permission)
}if (window.Vue) {window['permission'] = permissionVue.use(install); // eslint-disable-line
}permission.install = install
export default permission

6.使用自定义的指令与store

导入指令与mapGetters

import { mapGetters } from 'vuex'
import permission from '@/directive/permission/index.js'

在computed中定义要使用的状态值; 在directives中导入自定义的指令

export default {computed: {// 这样之后roles就变成了一个属性...mapGetters(['roles'])},// directives: { permission },mounted () {console.log("this.roles", this.roles)}
}

这样在模板中可使用自定义指令与状态值:

  <el-card class="box-card">Welcome ！<div v-permission="['admin']">超级管理员用户</div><div v-permission="['test']">测试人员</div><div v-permission="['dev']">开发人员</div><div>角色code:{{roles}}</div></el-card>

vuex使用及自定义Vue指令vue-permission相关推荐

Vue指令_常用vue指令_自定义全局指令_自定义局部指令---vue工作笔记0016
然后我们开始去看vue中的指令,以及自定义指令可以看到这里列出了他给的一些指令. 大部分我们不常用而且有些我们用过了,比如 v-bind 一般我们省略,然后剩下一个: 来使用就可以了.
vue 自定义按键/指令/过滤器
自定义过滤器语法 Vue.filter("过滤器1名称",function('原数据','arg1','arg2'){return 过滤数据; })Vue.filter(&quo ...
vue指令以及dom操作
"AngularJS 通过被称为指令的新属性来扩展 HTML.AngularJS 通过内置的指令来为应用添加功能.AngularJS 允许你自定义指令." 这是我最初接触&qu ...
Vue 自定义权限指令
前述虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现这里由于我的项目做了动态权限,页面的按钮也需要根据 ...
vue中自定义指令Vue.directive(指令名, 对象)
1.自定义全局指令可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用Vue.directive(指令名, 对象); // 对象中定义了该指令的所有生命周期函数方法,也叫钩子函数Vue. ...
vue中自定义全局指令报错
我主要从三个方面来检查 1.首先检查是否拼写错误,尽量粘贴,不要手写 2.区分好变量和字符串的差别 <p v-color="'red'">全局指令</p> ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
day1学习vue2笔记 vue指令
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
vue常用插件，可自定义选择。vue demo
UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...

vuex使用及自定义Vue指令vue-permission