全局设置按钮权限（通过vuex）

一，安装vuex，这里不再讲解。
二，在store的index文件夹中添加全局的store，并将其挂载到全局实例上去。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {
      userId: localStorage.getItem('userId'),
      username: '',
      login: false,
      token: localStorage.getItem('token'),
      permissions: [],
      userFreezeTypeList: []
    }
   },
   getters: {
   //有时需要根据store中的数据，运算新的数据，这时可以使用getter。他并没有更改store中的数据，而是获取到store中的数据之后，生成了一个新的数据
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
   mutations: {
   //mutations中会更改state中的数据，**个人理解这里相当于定义一个广播函数setPermissions，这个广播接收两个参数 state, { permissions }，需要在使用的时候调用这个广播壳子**
   	setPermissions: (state, { permissions }) => {
      state.user.permissions = permissions
    },
   }
   
  });
  // 检查用户权限使用的全局函数
Vue.prototype.hasPermission = function (permission) {
  return store.state.user.permissions.indexOf(permission) !== -1
}

export default store

三，在登陆成功的时候或者是进入首页的时候获取所有的该用户拥有的权限菜单，并将他赋值给store.state.user.permissions。我是在主页面展示的时候获取权限列表，并更改store中的值，重新保存。
this.$store.commit(“setPermissions”, {
permissions: data.permissions
})
这里的setPermissions需要跟你在store文件夹中定义的mutations的广播壳子一样。后面是两个是传给store文件的mutations中的setPermissions的参数，setPermissions（）会对他进行处理。

methods: {
    getMenus() {
      getSysMenu()
        .then(({ data }) => {
          if (data.code === 0) {
            this.$store.commit("setMenu", {
              menuList: data.menuList
            });
            this.$store.commit("setPermissions", {
              permissions: data.permissions
            });
          } else {
            const error = new Error(data.msg);
            throw error;
          }
        })
        .catch(error => {});
    }
  },

四，使用的时候。hasPermission(‘user:account-info:diamond:update’)函数中的参数需要跟后台约定，两方一致。

<el-tooltip  v-if="hasPermission('user:account-info:diamond:update')">
  <el-button  >
    改钻石
  </el-button>
</el-tooltip>