Currently, I am facing an issue while working on an app where I'm attempting to change the Vuex state using mutations but it's not functioning as expected. Initially, the state.status
is set as an empty string, and my goal is to update it to the value of the variable token
, which is also a string. I have implemented the updateToken
mutation for this purpose. Despite trying methods like Vue.set(state, 'status', token);
, I keep encountering errors (specifically:
"Cannot read property 'set' of undefined"
). Even after passing the token
to the second mutation, it remains empty, although the console.log() displays the correct token.
Below is a snippet of my code from store.js
:
import { createStore } from 'vuex';
import axios from "axios"
const msgFormData = new FormData();
const store = createStore({
state: {
status: "",
},
mutations: {
updateToken(state, token) {
state.status = token
},
sendToken(state, user_name) {
msgFormData.set('user_name', user_name);
msgFormData.append('msg_token', state.status);
axios.post("http://someip/index.php", msgFormData)
.then(res => {
console.log(res.status)
})
.catch(error => {
console.log(error)
})
},
}
});
export default store;
I make calls to these mutations like this:
this.$store.commit('updateToken', token.value)
in a Vue file and
this.$store.commit('sendToken', this.user.email)
in App.vue
.
If anyone can provide guidance on what mistake I might be making, I would greatly appreciate it.