экспорт по умолчанию новый Vuex.Store и мутации

Question

У меня проблема с использованием commit, как описано здесь .Вероятно, проблема в том, что я использую export default new Vuex.Store вместо export const store = new Vuex.Store.Но когда я изменяю это, у меня возникает проблема с этой темой .

Здесь - это мой файл JS, где я использую Vuex и хочу вызвать commit:

actions: {
  signUserIn(payload) {
    payload.password;
    var params = new URLSearchParams();
    params.append("grant_type", "password");
    params.append("username", "admin");
    params.append("password", "adminPassword");
    axios({
      method: "post",
      url: "http://localhost:8090/oauth/token",
      auth: { username: "my-trusted-client", password: "secret" },
      headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
      },
      data: params
    }).then(function(response) {
      const user = {
        login: payload.username
      };
      localStorage.setItem("access_token", response.data.access_token);
      this.commit("setUser", user);
    });
  }
},

В настоящий момент, когда я запускаю это и пытаюсь позвонить signUserIn У меня есть эта ошибка в консоли: TypeError: Cannot read property 'commmit' of undefined

Я понятия не имею, что я могу набрать в Google в этомслучай.

Answer 1

Обратите внимание, что подпись вашего метода действия неверна. Документы Vuex показывают, что метод действия принимает контекст Vuex (который содержит метод commit) в качестве первого параметра, а второй полезной нагрузки:

// signUserIn(payload) { // DON'T DO THIS
signUserIn(context, payload) {

С вашим текущим кодом,вы заметите, что payload.username и payload.password не определены.

демонстрация вашего действия с ошибкой

Ваш метод действия должен выглядеть следующим образом:

actions: {
  signUserIn(context, payload) {
    axios.post().then(response => {
      context.commit('foo', foo);
    });
  }
}

демонстрация исправлений

Answer 2

Полагаю, вы ошиблись.Это должно быть commit, а не commmit.

РЕДАКТИРОВАТЬ: видя файл, попробуйте вместо этого использовать функции стрелок.

axios({
    method: "post",
    url: "http://localhost:8090/oauth/token",
    auth: { username: "my-trusted-client", password: "secret" },
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
    },
    data: params
  }).then(response => {
    const user = {
      login: payload.username
    };
    localStorage.setItem("access_token", response.data.access_token);
    this.commit("setUser", user);
  });

Это потому, что вы потеряете контекст this без него.С функциями стрелок this остается this из внешнего контекста.Кроме того, не уверен, если вам нужен this в данном конкретном случае, но попробуйте с или без него.(Я говорил это слишком много раз)