vuex 获取不到 state 中的对象

Question

const token: string = store.state.user.token;
const info: Info = store.state.user.info;

console.log(store.state.user);
console.log(token);
console.log(info);

问题：获取到的是空的proxy对象

Answer 1

西门老舅 2023-08-13 22:12:59

你好，这种情况不太可能啊。

你可以在某一个vue文件中试试

const store = useStore()

console.log( store.state.user )

console.log( store.state.user.info )

• 提问者 香菜骑士 #1

  测试了在vue组件中可以获取到，但是在路由文件中获取不到
  import { store } from '@/store';
  // 路由全局前置守卫
  router.beforeEach((to) => {
      const token: string = store.state.user.token;
      const info: Info = store.state.user.info;

• 西门老舅 回复 提问者 香菜骑士 #2

  第一次是获取不到的，所以才会发请求去访问info
  
   const token = (store.state as StateAll).users.token;
    const infos = (store.state as StateAll).users.infos;
    if( to.meta.auth && _.isEmpty(infos) ){
      if(token){
        store.dispatch('users/infos').then((res)=>{
          if(res.data.errcode === 0){
            store.commit('users/updateInfos', res.data.infos)
            next()
          }
        });
      }
      else{
        next('/login');
      }
    }

• 提问者 香菜骑士 回复 西门老舅 #3

  // 请求发送后打印也为空，后续流程就会报错
  router.beforeEach((to) => {
      const token: string = store.state.user.token;
      const info: Info = store.state.user.info;
  
      // 检查用户登录状态
      if (!token && to.name !== 'login') {
          return { name: 'login' };
      }
  
      // 检查用户令牌
      if (token) {
          // 检查令牌合法性
          if (isEmpty(info)) {
              store
                  .dispatch('user/info')
                  .then((res) => {
                      if (res.data.errcode === 0) {
                          store.commit('user/updateUserInfo', res.data.infos);
                          console.log(store.state.user);
                      }
                  })
                  .catch((err) => {
                      console.log(err);
                      window.location.replace('/login');
                  });
          }
  
          // 重定向
          if (to.name === 'login') {
              return { name: 'home' };
          }
  
          // 检查路由权限
          if (to.meta.requiresAuth) {
              // info 一直为空
              // 检查用户权限
              if ((info.permission as Array<string>).includes(to.name as string)) {
                  return true;
              } else {
                   return false;
              }
          }
      }

点开查看后面5条评论