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;