Question

从nuxt.js中的vuex存储访问对象时遇到了一个奇怪的问题

登录后，我将用户保留在vuex存储中的对象用户中：

export const state = () => ({
  current_user: {}
})

export const mutations = {
  signIn(state, user_payload) {
    state.current_user = user_payload.user
  }
}

当我尝试通过signIn方法访问store.state.current_user.token时，store.state.current_user.token是未定义的（在浏览器中，调试时我看到它设置正确）。

然后在插件中

export default function ({ $axios, redirect, app: { store, router } }) {
  $axios.setHeader('Access-Control-Allow-Origin', '*');
  $axios.onRequest(config => {
    console.log(store.state.current_user.token); // always undefined
  });
}

真正奇怪的是，该修改有效：

export const state = () => ({
  current_user: {},
  token: ''
})

export const mutations = {
  signIn(state, user_payload) {
    state.current_user = user_payload.user
    state.token = state.current_user.token
  }
}

export default function ({ $axios, redirect, app: { store, router } }) {
  $axios.setHeader('Access-Control-Allow-Origin', '*');
  $axios.onRequest(config => {
    console.log(store.state.token); // it's valid after signIn
  });
}

所以我可以从存储访问字符串，但是不能访问对象。有什么想法吗？

nuxt.js插件中状态内部的对象字段未定义

0 个答案: