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

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

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

Имя модуля: auth

состояние. 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);
  }
}

мутаций. 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();
    }
  });
...