Vuejs Strict mode - Error: [vuex] do not mutate vuex store state outside mutation handlers. I do use mutation correctly already

Question

I am not new to Vue. In my development environment, strict mode is enabled. I used Mutation already, but this error is always throwing out when I try to login.

(I googled a lot, but can't find a helpful answer)

I use Quasar.

https://quasar.dev/quasar-cli/vuex-store#Adding-a-Vuex-Module.

store/index.js

import Vue from "vue";
import Vuex from "vuex";

import auth from "./auth";

Vue.use(Vuex);

export default function(/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      auth
    },

    // for dev mode only
    strict: process.env.DEV
  });

  return Store;
}

Module name: auth

state.js

export default {
  error: "",
  token: null,
  userId: null
};

actions.js

export async function login({ state, commit, dispatch }, payload) {
  const { username, password } = payload;
  const params = {
    username,
    password
  };
  try {
    const { data, status } = await axios.post("auth/login", params);

    if (status === 200) {
      commit("setAuthUser", { token: data.token, userId: data.userId }); // throw error here
      commit("setError", ""); // throw error here
    }
  } catch (error) {
    console.log(error);
  }
}

mutaions.js

export const setError = (state, payload) => {
  state.error = payload;
};

export const setAuthUser = (state, payload) => {
  state.token = payload.token;
  state.userId = payload.userId;
};

Any help will be appreciated.

my Login.vue

data() {
    return {
      form: {
        username: "admin",
        password: "secret"
      }
    };
  },
methods: {
    login() {
      this.$store.dispatch("auth/login", this.form);
    }
  }

I didn't use state directly in the markup

Read the token in the routes file to check permission.

    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (store.state.auth.token === null) {
        next({
          path: "/login",
          query: { redirect: to.fullPath }
        });
      } else {
        next();
      }
    } else {
      next();
    }
  });

There's nothing above that would trigger that error. Can you share the stacktrace? — Phil, Aug 04 '20 at 04:25
@Phil i had the same error. its the `async / await` that triggers the error. in my case i just moved the ajax request to the component and commitet from my compnent an event to the store — bill.gates, Aug 04 '20 at 05:13
@Ifaruki an `async / await` will not _"trigger this error"_ all on its own. I suspect OP is unknowingly hanging on to an object reference somewhere but so far, they have not shown that code. — Phil, Aug 04 '20 at 05:17
Could you share your file where you import your mutations, actions, and store state, please? — Tony, Aug 04 '20 at 05:20
Are you absolutely sure that the code you've shown for your action is exactly how it looks in your actual code? What about things that read state (eg `this.$store.state.auth...`, getters, `mapState`, etc)? Do you have any of those or is your state never read? — Phil, Aug 04 '20 at 05:22
@Phil For a login form, you don't need to read state which are null — B.D, Aug 04 '20 at 05:27
This [issue](https://stackoverflow.com/questions/46044276/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers) should help you. You may be mutating the state using `v-model` as in the linked issue. — Tony, Aug 04 '20 at 05:32
@Tony Nope, I didn't use state in Vue file directly. This is just a login form, you don't have to change anything in vue file, just need to assign the token and userId you get from server to state. — B.D, Aug 04 '20 at 05:36
@billdou so you're saying you **never** read anything from auth module state ever? If so, why bother storing it? If you do read from auth module state **anywhere** in your code (not just in this form component), please show that code — Phil, Aug 04 '20 at 05:50
@Phil I didn't say **never**, just in this case, there is nothing to read before you populate it. — B.D, Aug 04 '20 at 05:57
Just for fun, try `nextTick()`: I had the same error as op and scoured my VueX setup 10 times, not finding any issues. What cleared the error for me was wrapping my store commit call with a plain Vue `nextTick()`; an indication it had something to do with load order, timing, etc. I'm not saying this is a solution, but it can help you move along and/or discover the ultimate culprit. — Kalnode, Jan 10 '21 at 18:36

Vuejs Strict mode - Error: [vuex] do not mutate vuex store state outside mutation handlers. I do use mutation correctly already

0 Answers0