Состояние Vuex, похоже, не сохраняется после мутации в NUXT. js - PullRequest
0 голосов
/ 29 января 2020

Я пытался выяснить, почему мое поле состояния 'pwdata' не сохраняет свое значение после того, как оно установлено внутри мутации.

Я вызываю действия, связанные с загрузкой информации о пользователе и пароле внутри метод в компоненте vue с функцией method.submit, например, так ...

<template>
  <v-form @submit.prevent="submit">
    <v-container>
      <v-alert type="warning" color="#FFCA28" :value="alert">Please fill email and password</v-alert>
      <v-row>
        <v-col cols="12" md="4">
          <v-text-field v-model="username" label="Username" required></v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <v-text-field v-model="password" label="Password" type="password" required></v-text-field>
          <v-btn color="#00BFA5" class="success" type="submit">SUBMIT</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>
<script>
export default {
  data() {
    return {
      username: null,
      password: null,
      alert: false
    }
  },
  methods: {
    async submit() {
      if (!this.username || !this.password) {
        this.alert = true
      } else {
        // eslint-disable-next-line no-console
        await this.$store.dispatch('loadUsers')
        await this.$store.dispatch('loadPasswords')
        var user = await this.$store.dispatch(
          'loginUser',
          this.username,
          this.password
        )
        if (user.error) {
          alert(user.error)
        } else {
          alert('Successful Login. Thank you for signing in, ' + user.name)
        }
        this.password = null
      }
    }
  }
}
</script>
<style scoped>
.colored {
  color: '#76ff03';
}
</style>

Это мой файл store / index. js. Насколько я понимаю, ожидание говорит, что среда выполнения не должна продолжаться, пока этот другой поток не будет завершен командой, связанной с ожиданием. В основном, программа останавливается там до тех пор, пока не будет завершена ожидающая обработка. Пожалуйста, поправьте меня, если я ошибаюсь. Если это действительно так, то какой смысл использовать асинхронную функцию c, если мы просто собираемся вызвать функцию await для эффективной остановки текущего потока, пока этот другой поток не завершится. Это имеет тот же эффект, что и синхронная обработка, не так ли?

В любом случае, кажется, что данные правильно загружаются в state.pwdata в методе SET_PWDATA. Я собираю это из console.logs, которые я установил. Но в действии loginUser я получаю сообщение о том, что pwdata в основном не определена.

Я оглянулся назад на документацию по nuxt vuex и изменил некоторые синтаксисы, чтобы соответствовать текущему, но состояние.pwdata по-прежнему не сохраняется после мутации, как будто мутация похоже, что влияет на фактическое состояние vuex, но на самом деле просто делает state.pwdata из воздуха и использует его вместо фактического состояния vuex.

/* eslint-disable no-console */
import axios from 'axios';
import bcrypt from 'bcrypt-nodejs'

export const state = () => ({
    users: [],
    currentUser: {},
    pwdata: {}
});

export const getters = {
};

export const actions = {
    async loadUsers({ commit }) {
        await axios.get('/userdata/userlist.json')
            .then(function (response) {
                let users = response.data;
                commit('SET_USERS', users);
                let user = JSON.parse(window.localStorage.currentUser);
                commit('SET_CURRENT_USER', user)
            })
            .catch(function (error) {
                console.log(error);
            });
    },
    async loadPasswords({ commit }) {
        await axios.get('/userdata/pwlist.json')
            .then(function (response) {
                let pwdata = response.data;
                console.log(pwdata);
                commit('SET_PWDATA', pwdata);
            })
            .catch(function (error) {
                console.log(error);
            });
    },
    logoutUser({ commit }) {
        commit('LOGOUT_USER');
    },
    loginUser({ commit }, un, pw) {
        //run verification function that goes into .txt and compares usernames/passwords
        console.log(state);
        console.log(state.pwdata);
        console.log(state.pwdata[un]);
        var userHash = state.pwdata[un];
        if (bcrypt.compareSync(pw, userHash)) {
            var user = state.users.filter(x => x.name == un)
            commit('SET_CURRENT_USER', user);
            return user;
        }
        else
            //run error handler
            return { error: "Username/password combination was incorrect. Please try again." };
    }
};

export const mutations = {
    SET_USERS(state, users) {
        state.users = users;
    },
    LOGOUT_USER(state) {
        state.currentUser = {};
        window.localStorage.currentUser = JSON.stringify({});
    },
    SET_CURRENT_USER(state, user) {
        state.currentUser = user;
        window.localStorage.currentUser = JSON.stringify(user);
    },
    SET_PWDATA(state, pwdata) {
        console.log(state.pwdata);
        state.pwdata = pwdata
        console.log(state.pwdata);
    }
};
...