Discovering the method to access a getter from a different JavaScript file

In a laravel + vuejs project, I am trying to access my currentUser role in my Acces.js file using store.getters.currentUser but encountering an error:

Error in render: "TypeError: Cannot read property 'getters' of undefined

I have tried multiple solutions without success. Can anyone provide assistance?

Here is my Acces.js:

import {store} from './store' 
export default class  Acces {


 Admin(){
     return store.getters.currentUser.role ==="admin";
 }
 NotUser(){
     return store.getters.currentUser.role === "admin" ||  store.getters.currentUser.role === "chef de projet" ||store.getters.currentUser.role === "client" ;
 }
 Chef(){
     return store.getters.currentUser.role === "chef de projet";
 }
 client(){
    return store.getters.currentUser.role === "client";
}
adminchef(){
    return store.getters.currentUser.role === "admin" || store.getters.currentUser.role === "chef de projet";
}
chefUser(){
    return store.getters.currentUser.role !== "admin" || store.getters.currentUser.role === "chef de projet" ||user.role !== "client"
}
};

And here is my store.js:

import { getLocalUser } from "./helpers/auth";

const user = getLocalUser();

export default {
state: {
    currentUser: user,
    isLoggedIn: !!user,
    loading: false,
    auth_error: null,
    customers: []
},
getters: {
    isLoading(state) {
        return state.loading;
    },
    isLoggedIn(state) {
        return state.isLoggedIn;
    },
    currentUser(state) {
        return state.currentUser;
    },
    authError(state) {
        return state.auth_error;
    },
    customers(state) {
        return state.customers;
    }
},
mutations: {
    login(state) {
        state.loading = true;
        state.auth_error = null;
    },
    loginSuccess(state, payload) {
        state.auth_error = null;
        state.isLoggedIn = true;
        state.loading = false;
        state.currentUser = Object.assign({}, payload.user, {token: payload.access_token});

        localStorage.setItem("user", JSON.stringify(state.currentUser));
    },
    loginFailed(state, payload) {
        state.loading = false;
        state.auth_error = payload.error;
    },
    logout(state) {
        localStorage.removeItem("user");
        state.isLoggedIn = false;
        state.currentUser = null;
    },
    updateCustomers(state, payload) {
        state.customers = payload;
    }
},
actions: {
    login(context) {
        context.commit("login");
    },
    getCustomers(context) {
        axios.get('/api/customers')
        .then((response) => {
            context.commit('updateCustomers', response.data.customers);
        })
    }
}
};

Answer №1

Modify

import {store} from './store' 

to:

import store from './store' 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the Mouse Hover feature to target various <div id> elements within a single Vue.js function

I have created two div IDs in an HTML file where I have specified the mouseover property. <div id="app"> <img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1"> </div> <div id="app1"> <img cl ...

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

Setting up webRTC and Express.js to function within the same domain requires proper configuration

Currently, I am in the process of creating a video conferencing website using node.js and express.js rather than apache. However, I am faced with some challenges when deciding on the best approach. The main goal is to have the server deliver the website t ...

Struggling to make a JavaScript program that sums up odd numbers

Let's tackle this challenge: Your task is to create a program that adds up all the odd numbers between 1 and the number provided by the user. For instance, if the user inputs 7, the program should calculate 1 + 3 + 5 + 7. The result of this calculati ...

Utilizing the <slot> feature in Angular 5 for increased functionality

Currently, I am working on a single page application (SPA) where Vue framework has been utilized for development purposes. Front-End: Vue Back-End: NodeJs Within my application, there are other sub-modules built in Angular 4. I am looking to replicate th ...

Execute JavaScript function in NodeJS server background

I have developed a function that periodically monitors the battery statuses of connected android devices and returns an array. How can I execute this function on server startup and ensure it continues to run while sharing its information with other pages? ...

Tips for customizing babel's preset plugin configurations

I've integrated babel-preset-react-app into my project with the following .babelrc configuration: { "presets": ["react-app"], "plugins": [ "transform-es2015-modules-commonjs", "transform-async-generator-functions" ] } Currently, I&apos ...

Detecting changes in parent ref with Vue's v-modelIs this

I am struggling to implement two-way binding because I can't determine if the model ref is being changed by the parent or child component. Using watch captures all changes without any indication of the source of the change. <script setup> // Pa ...

Setting the borderRadius for a web view on Android Maps V3: A complete guide

In my application, I am using Android Map V3 and have encountered a bug specific to the Kit-Kat version. The chromium kit throws up an error message - nativeOnDraw failed; clearing to background color, which prevents the map from being displayed. Despite ...

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: Unfortunately, the letters shifted and the size slightly changed. ...

Is there a way to instantly show the contents of a newly opened tab in BootstrapVue?

Good day, my objective is as follows: Whenever a new tab is opened, it should become 'active' and display its content on the browser Issue: Currently, when a new tab is opened, the previous tab remains 'active'. Check out a simple e ...

Tips for making an ajax call in Angular 6

As a backend developer, I have limited experience with Angular. How can I send an ajax request from Angular to test my API? The request needs to be sent before clearing the localeStorage. Can you provide guidance on how to achieve this? <button (clic ...

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

What is the best method for converting a string to an integer when transitioning from CSV to JSON format?

Upon discovering this code snippet designed to convert a CSV file into JSON format, I encountered a specific requirement. In this scenario, the credit field needs to be an integer, which means it should not be enclosed within quotation marks like "". I de ...

Tips for resolving the error message "Uncaught TypeError: Cannot read property '0' of undefined" in React rendering

When I try to map through my list in the render function, it doesn't work, even though it works fine within my component class DesktopList extends Component { constructor(props) { super(props); this.state = { i ...

The image from the local source displays correctly in the initial component without any issues, but it does not appear in its corresponding detail component

My blog has a component for displaying posts and another component for showing the details of a single post as seen below. A key point to note is that while the blog component can load and display images, the blog details component cannot. Why is this? h ...

handling component interaction with react-redux store

Currently, I am in the process of developing my first significant project using react-redux. While trying to establish state mapping between components in react-redux, I seem to have missed a crucial step. Almost everything is functioning smoothly except ...

Is it possible to show or hide a DIV based on the text content of another DIV using JavaScript in

I am looking for a way to dynamically hide a DIV based on user roles using only the text inside a title tag as a reference. Here is an example of the HTML structure: <title>admin</title> If the user role is admin, then hide the following DI ...

Special effects for the images动画效果。

Is there a way to add animation effects to images in the about section using this code: <div id="about" class="row section bgimg3"> <div class="col-sm-8"> <h2 style="color:black;">Want to Know More About me?</h2> ...

Issues with the initial calculator project I built using JavaScript (excluding HTML and CSS)

My first calculator is nearly complete, but I have encountered a challenge. The functionality of my calculator is quite simple; it prompts the user for input using window.prompt and performs addition, subtraction, multiplication, or division based on the u ...