The MODULE is malfunctioning due to an unidentified mutation type: user/setUserInfo

My store/index.js looks like this:

const store = new Vuex.Store({
  modules: {
    app,
    user,
  },
  state: {
    token: getToken(),
    hasLogin: false,
  },
  mutations: {
    ...rootMutations,
  },
  actions: {
    ...rootActions,
  },
})

export default store

The content of store/modules/user.js is as follows:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  namespaced: true,
  state: {
    phone: '',
  },
  mutations: {
    setUserInfo(
        { state },
        { phone },
    ) {
      // ...
      state.phone = phone | state.phone
    },
  },
})

export default store

There seems to be an issue with one of the actions:

In rootActions.js:

const actions = {
getUserInfo: async function(store) {
    const { commit, state } = store
    console.log(store)
    return await new Promise((resolve, reject) => {
            // A lot of request code here, save results in user/setUserInfo

            commit('login')
            commit('user/setUserInfo', {
              phone: r.phone,
            })
    })
  },
}

However, I encountered an error related to unknown mutation type:

[vuex] unknown mutation type: user/setUserInfo(env: macOS,mp,1.05.2106300; lib: 2.17.0)

I'm unsure why I am unable to access mutations in the user module. I've tried various samples but none seem to work for me. Can someone please help me solve this issue?

Answer №1

Avoid creating a new instance of the vuex store for each module. Instead, export an object that includes the state, actions, mutations, and getters.

For example, your user.js file should be structured like this:

export default {
  namespaced: true,
  state: {
    phone: '',
  },
  mutations: {
    setUserInfo(
        state,
        { phone },
    ) {
      // ...
      state.phone = phone || state.phone;
    },
  },
}

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

Is there a way to connect either of two distinct values in Angular?

Looking to assign the data with two possible values, depending on its existence. For instance, if I have a collection of TVs and I want to save the "name" value of myTVs[0] and myTVs[1]. For example: var myTVs = [ { "JapaneseTV": { ...

Retrieving information from a MYSQL database table and populating a text field with AJAX and PHP

Is there a way to use AJAX to display the data from an array that is called in getword.php into a text field in index.php? Let's take a look at the code below: Here is the code snippet from index.php: <body> <div class="container" ...

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

Discover unique values for a specified JSON attribute among all records in a database

Is it possible to fetch all the unique values of a json-property from multiple documents in a collection using the Marklogic Java Client API? For example, if there are 3 "MyDocument" type documents with the property "myProperty" as follows: MyDocument1.j ...

Displaying Laravel's validation errors within the Ajax success event

When attempting an Ajax request and anticipating a failure, I find that the error response is unexpectedly being received within the success event instead of the fail event. I require Laravel's response to be directed to the Ajax fail event, as I int ...

Guide to creating a new browser tab in Java Script with customizable parameters

Here is a function I created to open a new window with a specific URL and pass certain parameters. function viewWeightAge() { var userNIC = document.getElementById("NICNo"); var childName = document.getElementById("c ...

The announcement will not be made as a result of the utilization of a private name

I've been working on transitioning a project to TypeScript, and while most of the setup is done, I'm struggling with the final steps. My goal is to use this TypeScript project in a regular JavaScript project, so I understand that I need to genera ...

The additional cost associated with using a React hook is called the "

Our system includes a theme context provider that passes down a theme to all child components, calculated based on the device's dimensions. We can easily access these values using the useTheme hook in any component. In addition, we have a constants f ...

Sending a sound recording to the express js server with the help of multer

I'm currently working on a project where I need to record audio and save it in my local directory (uploads folder) using express js and multer. The recording part is working fine with mic-recorder-to-mp3, but I'm facing an issue with saving the r ...

Spin: twist beyond 360 degrees or less than 0 degrees

Attempting to rotate an arrow indicating wind direction using the transform: rotate() property. The data for rotation is retrieved from an API fetch, and conventional measurement of wind direction involves indicating where the wind is coming from. Therefo ...

Difficulty with Horizontal Mousewheel Scrolling

Struggling to implement a horizontal scrolling feature (via mousewheel) for both containers in the code below. I want this feature to be easily applied to any future container creations as well. <body> <style> #container { display: flex ...

What is the best approach to including files in addition to other data fields when calling a webmethod in asp.net using a jquery ajax request?

My webform contains a variable number of textboxes and dropdowns. To send data to the server-side webmethod, I am utilizing the following code: $.ajax({ type: "POST", url: "SupplierMaster.aspx/RegisterSupplier", data: JSON.stringify({ ...

Tips for extracting only the filename from chokidar instead of the entire file path

I am trying to capture the filename that has been changed, removed, or renamed, but I am currently receiving the full file path. Question: How can I extract only the filename when it is changed, instead of working with the entire file path? This is what ...

React: A functional component triggers both onClick events

In my project, I have organized my files in the following directory structure: Todo -> TodoList -> TodoItem I am passing todos, onSelection, and onDeletion functions from the Todo component to the TodoList component, and then further down to the To ...

Avoiding the resizing of table headers when positioned at the top of a window

Having an issue with resizing elements on a webpage. I have dynamically generated a table from JSON data and have a function that sticks the table header to the top of the page when scrolling: var header = $("#dataheader").offset(); $(window).scroll(func ...

Is there a way to customize the color of specific sections on a dygraph chart?

I am looking to incorporate dygraphs into my website, but I need help with displaying a specific background color in certain parts of the chart. For example, I want the chart to show green during daylight hours. Can you assist me in achieving this? ...

The dragend event in JavaScript is triggered right after the dragstart event

I'm facing a critical bug that's causing significant issues for me. In my Vue project, I have developed a form generator component. It consists of a draggable area with user-friendly draggable items such as short answer, long answer, numeric ans ...

The express response fails to include the HTML attribute value when adding to the href attribute of an

When using my Nodejs script to send an express response, I encounter a problem. Even though I set the href values of anchor tags in the HTML response, they are not visible on the client side. However, I can see them in the innerHTML of the tag. The issue ...

What is the process for running a function upon closing a tab?

Here is the function I am using to detect when a form is closing: window.onbeforeunload = function (e) { var y = e.pageY || e.clientY; //window.event.clientY; // if (y < 0) { return 'Window closed'; } ...

Ways to refine data using multiple criteria

I have a list of alarm data that I need to filter based on specific conditions. If there are multiple alarms of type "pull_Alarm" and "emergency_alarm" in the same location, I want to prioritize the "emergency_alarm". Here is my list: [ { ...