Vuex is not mutating the state-CodePudding

I am trying to switch authenticated from false to true, a property in the state, It's not working.

My codes from store.js

state() {
    return{
       authenticated : false,
       user : {}
    }
},

getters : {
    authenticated(state){
        return state.authenticated
    }
},

mutations : {
    set_authenticated(state, value){
        return state.authenticated = value
    }
},

My updated code from login.vue (script)

data() {
    return {
       allerrors : [],
       success : false,
       data: {
           email : "",
           password : ""
       }
    }
},

methods : {
    login: function() {
    this.$store
        .dispatch("login", this.data)
        .then(response => {
                            this.allerrors = [],
                            this.success = true,
                            this.data = {}
                            alert(response.data)
                        })
                        .catch((error) => {
                            this.allerrors = error.response.data.error
                            this.success = false
                            alert(allerrors)
                        })
    },

My updated action is :

 async login({ commit }, data) {
        await axios.post('login', data)
         .then(response => {
           commit('set_authenticated',true);
           })
         .catch((error) => {
           this.allerrors = error.response.data.error
           this.success = false
          })
    }

CodePudding user response：

There are a few problems here:

First, if that is the full code for your store.js file, then you are missing the call to createStore() (for Vue 3) or new Vuex.Store() (for Vue 2)

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count  
    }
  }
})

Source

The second problem is that you shouldn't be committing mutations from your Single File Components. The typical flow is:

Components dispatch actions
Actions commit mutations
Mutations update state

You're trying to commit a mutation directly from the component.

You need to add an action to your store.js

async login({ commit }, userData) {
  await axios.post('login', userData)
   .then(response => {
     commit('set_authenticated',true);
     })
   .catch((error) => {
     this.allerrors = error.response.data.error
     this.success = false
    })
   }

Mutation:

mutations : {
    set_authenticated(state, value){
        state.authenticated = value
    }
},

Then your Login.vue would change to something like:

  methods: {
    login: function() {
      this.$store
        .dispatch("login", { userData })
        .then(() => )) // whatever you want to do here.
        .catch(err => console.error(err));
    }
  }

CodePudding user response：

mutations shouldn't have a return statement. it should be like this

mutations : {
    set_authenticated(state, value){
        state.authenticated = value
    }
},