Строгий режим Vuejs — ошибка: [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций. Я уже правильно использую мутацию

Я не новичок в Vue. В моей среде разработки включен строгий режим. Я уже использовал Mutation, но эта ошибка всегда вылетает, когда я пытаюсь войти в систему. введите здесь описание изображения

(Я много гуглил, но не нашел полезного ответа)

Я использую Квазар.

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

магазин/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;
}

Имя модуля: авторизация

состояние.js

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

действия.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;
};

Любая помощь будет оценена.

мой логин.vue

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

Я не использовал состояние непосредственно в разметке

Прочтите токен в файле маршрутов, чтобы проверить разрешение.

    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();
    }
  });

person bill dou    schedule 04.08.2020    source источник
comment
Нет ничего выше, что могло бы вызвать эту ошибку. Можете поделиться трассировкой стека?   -  person Phil    schedule 04.08.2020
comment
Пожалуйста, поделитесь своим видом компонента тоже   -  person mandaputtra    schedule 04.08.2020
comment
@Фил, у меня была такая же ошибка. это async / await, который вызывает ошибку. в моем случае я просто переместил запрос ajax в компонент и зафиксировал событие из моего компонента в хранилище   -  person Ifaruki    schedule 04.08.2020
comment
@Ifaruki и async / await не будут вызывать эту ошибку сами по себе. Я подозреваю, что OP где-то неосознанно цепляется за ссылку на объект, но до сих пор они не показали этот код.   -  person Phil    schedule 04.08.2020
comment
Не могли бы вы поделиться своим файлом, в котором вы импортируете свои мутации, действия и состояние хранилища, пожалуйста?   -  person Tony    schedule 04.08.2020
comment
Вы абсолютно уверены, что код, который вы показали для своего действия, именно так выглядит в вашем реальном коде? Как насчет вещей, которые считывают состояние (например, this.$store.state.auth..., геттеры, mapState и т. д.)? У вас есть что-то из этого или ваше состояние никогда не читается?   -  person Phil    schedule 04.08.2020
comment
@Phil Для формы входа вам не нужно читать состояние, которое равно нулю   -  person bill dou    schedule 04.08.2020
comment
Эта проблема должна вам помочь. Возможно, вы изменяете состояние, используя v-model, как в связанной проблеме.   -  person Tony    schedule 04.08.2020
comment
@Tony Нет, я не использовал состояние в файле Vue напрямую. Это просто форма входа, вам не нужно ничего менять в файле vue, просто нужно назначить токен и идентификатор пользователя, которые вы получаете с сервера, в состояние.   -  person bill dou    schedule 04.08.2020
comment
@billdou, так вы говорите, что никогда ничего не читали из состояния модуля аутентификации? Если да, то зачем его хранить? Если вы читаете из состояния модуля аутентификации где-либо в своем коде (не только в этом компоненте формы), покажите этот код   -  person Phil    schedule 04.08.2020
comment
Описание вопроса @Phil обновлено   -  person bill dou    schedule 04.08.2020
comment
@ Фил, я не говорил никогда, просто в этом случае нечего читать, прежде чем заполнить его.   -  person bill dou    schedule 04.08.2020
comment
Просто ради интереса попробуйте nextTick(): у меня была та же ошибка, что и у оператора, и я просмотрел настройки VueX 10 раз, не найдя никаких проблем. Что устранило ошибку для меня, так это то, что мой вызов фиксации магазина был обернут простым Vue nextTick(); указание на то, что это как-то связано с порядком загрузки, синхронизацией и т. д. Я не говорю, что это решение, но оно может помочь вам двигаться дальше и/или обнаружить главного виновника.   -  person MarsAndBack    schedule 10.01.2021