Vuex 操作返回 undefined 和 null

Question

大家好，我正在使用 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;

Answer 1

您在操作中获得的第一个参数是context，它与store 对象具有相同的属性。

在您正在执行的init 操作中

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

您尝试在哪里分派 setToken 操作。

但是context 参数没有actions 属性。

要调度另一个动作，您应该使用context 参数提供给您的dispatch 方法。

所以在您的init 操作中

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

参考-vuex actions