How to execute a function in store.js from a different JS file within a Vue project

Question

How to execute a function in store.js from a different JS file within a Vue project

I am currently utilizing Vuex to store my data in a file called store.js. Within this setup, I have a mutation method named 'autoUpdateDb' as seen below:

store.js :

import Vuex from "vuex";
import Vue from "vue";
import { serv } from "./serviceMixin";

Vue.use(Vuex);

export default new Vuex.Store({

mutations: {
    autoUpdateDb(state, payload) {
        functionA();
    },        
},

actions: {}

});

However, when attempting to invoke the "autoUpdateDb" function, an error stating "(void 0) is undefined" is encountered. The actual function being called, 'functionA()', resides in another JavaScript file named serviceMixin.js

serviceMixin.js :

 functionA(){
      console.log("Hello");
            }

Could you kindly guide me on the correct way to call the required function?

Many thanks!

javascript vue.js vuejs2

Answer 1

Answer №1

Consider the following scenario where we have two files named First.js and Second.js residing in the same folder. Let's take a look at the code snippet from the file First.js:

export default function FunctionOne(){
    console.log("Executing code from First.js")
}

Now, let's move on to the contents of Second.js:

import FunctionOne from './First.js'
FunctionOne()

Answer 2

Consider the following scenario where we have two files named First.js and Second.js residing in the same folder. Let's take a look at the code snippet from the file First.js:

export default function FunctionOne(){
    console.log("Executing code from First.js")
}

Now, let's move on to the contents of Second.js:

import FunctionOne from './First.js'
FunctionOne()

Answer 3

Answer №2

If your project utilizes a module bundler such as webpack, make sure to include the function in your store.js file.

const {utilityFunction} = require('./serviceMixin');

Next, remember to export utilityFunction:

function utilityFunction(){

}

module.exports = {
    utilityFunction
}

Answer 4

If your project utilizes a module bundler such as webpack, make sure to include the function in your store.js file.

const {utilityFunction} = require('./serviceMixin');

Next, remember to export utilityFunction:

function utilityFunction(){

}

module.exports = {
    utilityFunction
}

Answer 5

Answer №3

If you have a file named serviceMixin.js, make sure to correctly define the function by including the keyword function and exporting it like this:

 export function functionA(){
      console.log("Hello");
            }

Next, in your store file, import the function at the top and call it within an action like so:

import {functionA} from './serviceMixin'
... 
mutations: {
      autoUpdateDb(state, payload) {
       functionA();
    },

Answer 6

If you have a file named serviceMixin.js, make sure to correctly define the function by including the keyword function and exporting it like this:

 export function functionA(){
      console.log("Hello");
            }

Next, in your store file, import the function at the top and call it within an action like so:

import {functionA} from './serviceMixin'
... 
mutations: {
      autoUpdateDb(state, payload) {
       functionA();
    },

How to execute a function in store.js from a different JS file within a Vue project

Answer №1

Answer №2

Answer №3

Similar questions

Removing Redux State in ReactDeleting data from Redux in a

transform nested object into a flat object using JavaScript

Update the src attribute of img elements using regular expressions

Guide on converting JSON object to condensed rows when using ng-repeat

Load media upon the click of an image

The object _plugins_vuetify__WEBPACK_IMPORTED_MODULE_8__.default does not contain a constructor function

Ensuring Map Safety in Typescript

npm: Generating debug and production builds while ensuring accurate dependency management

Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

Is the webdriver.io waituntil method designed to return a boolean value of true or false

What is the best way to update a specific element within a web page?

What is preventing me from executing node.js and socket.io within a screen or utilizing Forever?

Is it possible to access JSON with a numeric key and receive undefined as a result?

There was an issue with the vue-server-renderer where the render function or template was not defined in the component

Incorporating the angular UI router effectively by reusing the same templateUrl and controller multiple times

Trouble with useEffect not triggering in NextJS 13.4 (app router) application

Obtain data in JSON format through an xmlhttp request

Is there a way to make the switch case condition shorter?

Adjusting the size of all elements on a webpage

Utilizing PHP to create an interactive website