Действия Vuex возвращают неопределенные и нулевые - PullRequest
Новая
       7

Действия Vuex возвращают неопределенные и нулевые

0 голосов
/ 01 июня 2018

Эй, ребята, я создаю логин с помощью Vue, Vuex и Axios.Но когда я нажимаю кнопку входа в систему вместо того, чтобы печатать имя пользователя, он просто печатает токен доступа.Кроме того, когда я проверяю devtools, он показывает, что некоторые объекты / переменные не определены.Я не уверен, почему это происходит, надеюсь, вы можете помочь, так как это было бы очень ценно.

index.js (Vuex): 

import vuex from 'vuex';
import axios from 'axios';
import mutations from './mutations';


const createStore = () => {
  return new vuex.Store({
    state: {
      accessToken: "Hello",
      user: {
          dob: null,
          email: null,
          firstName: null,
          gender: null,
          id: null,
          lastName: null,
          profileImage: null,
          registered: null,
          verified: null
      }
    },
    getters: {
      accessToken: state => {
        return state.accessToken;
      },
    },
    actions: {
      init(store) {
        store.actions.setToken(store, JSON.parse(localStorage.getItem('accessToken') || ''));
      },

      setToken(store, value) {
        store.commit('SET_TOKEN', value);
      },

      login(store, value){
          store.commit('SET_TOKEN', value);
          store.dispatch('pullUserDetails');
      },

      pullUserDetails(store){
        console.log(store);
        axios.get(
            'https://api.ticketpass.co/user',
            {
                headers: {
                    'Authorization' : 'Bearer' + store.state.accessToken
                }
            }
        )
        .then((response) => {
            console.log(response.data);
            store.state.user.dob = response.data.dob;
            store.state.user.email = response.data.email;
            store.state.user.firstName = response.data.firstName;
            store.state.user.gender = response.data.gender;
            store.state.user.id = response.data.id;
            store.state.user.lastName = response.data.lastName;
            store.state.user.profileImage = response.data.profileImage;
            store.state.user.registered = response.data.registered;
            store.state.user.verified = response.data.verified;
        },
        (error) => {
            error.response.id;
            error.response.firstName;
            error.response.lastName;
            error.response.email;
            error.response.profileImage;
            error.response.dob;
            error.response.gender;
            error.response.registered;
            error.response.verified;
        }
      );
    }
    },
    mutations
  });
};

export default createStore;

mutations.js 

import { error } from "util";

const mutations = {
  setToken(state, token) {
    state.accessToken = token;
  },

  SET_TOKEN(state, value) {
    console.log(value);
    localStorage.setItem('accessToken', value);
    state.accessToken = value;
    console.log(state.accessToken);
  },


};

export default mutations;

1 Ответ

0 голосов
/ 01 июня 2018

Первый аргумент, который вы получаете в действиях, это context, который имеет те же свойства, что и объект store.

В своем действии init вы выполняете 

init(store) {
   store.actions.setToken(store, JSON.parse(localStorage.getItem('accessToken') || ''));
 }

, гдевы пытаетесь отправить действие setToken.

Но аргумент context не имеет свойства actions.

Для отправки другого действия вы должны использовать метод dispatch, которыйаргумент context дает вам.

Итак, в вашем init действии 

init(store) {
    store.dispatch('setToken', JSON.parse(localStorage.getItem('accessToken') || ''));
  },

Reference- vuex действия

...