How to use mixin computed and data in vuex store? (vue 2, vuex 3)

111 Views Asked by At

How do I use a mixin computed and data in vuex store? I decided to use mixin as I have to use the properties in many vue templates. I didn't want to put the permission checking logic in the store since store actions is async and will return a promise if I use the action directly in the template.

This is the only instance that I have to use the mixin in a store and I am having trouble doing so. I read that I can use .computed. but I am having trouble importing the mixin file in the first place. It gives me the error 'Cannot read properties of undefined' though the path to the file is correct. How do I make this work?

ps. Another idea i have is the have the logic in checkPermissions.js in vanilla js. Then i import the variable and function in a mixin to be used in templates, and also import them in the store.

mixins/checkPermissions.js

import {permissionList} from '../../src/permission';

export default {
    data() {
        return {
           permissions: Object.freeze({
           ....
            })  
        }
    },
  computed: {
    hasPermission() {
        return function (name) {
          return permissionList.includes(name);
      };
    },
  },
};

store/permission.js

import checkPermissions from '../mixins/checkPermissions'; // causes 'Cannot read properties of undefined' error
import { asyncRouterMap, constantRouterMap } from "@/router";

const permission = {
  namespaced: true,
  ....
  actions: {
    GenerateRoutes({ commit, dispatch, getters }, data) {
      return new Promise(resolve => {
        const { userPermissions } = data;
        let accessedRouters = [];
        let canViewAllRoutes = true;// I want to use the computed and data property here 
        //e.g this.hasPermission(this.permissions....)
       ...
        resolve();
      });
    },
  }
};

export default permission;
0

There are 0 best solutions below