vuex路由守卫的坑

在分模块保存时，我会使用store进行保存，

在前端进行路由保护时，如果用户没有登录，就跳转到登录页面，这是一个基础功能，以前的的写法

（1）新建一个store的模块，

export default {
  namespaced: true,
  state: {
    //用于存储数据
    name: "user:zhangsan",
    userInfo:{
      id:0,
    } //保存登录信息
  },
  mutations: {
    //用于执行相应的操作，在调用commit时执行，只有在commit时，才会自动调用对应的方法
    changeName(state, value) {
      //修改Name的值函数，需要调用
      console.log("修改Name的值");
      state.name = value;
    },
    changeUserInfo(state, value) {
      //修改Name的值函数，需要调用
      console.log("修改UserInfo的值");
      state.userInfo = value;
    },
  },
}

在store引入并使用

import { createStore } from 'vuex' //导入vuex
import userStore from './models/user.state'//引入ts文件
import empStore from './models/emp.state'
//创建存储对象
const store = createStore({
 
  modules: {// 模块化处理
    userStore,//注册，注册的名称就是命名空间
    empStore,
  }
})
//向外输出对象（暴露对象）
export default store

路由守卫的代码段

以前的写法

//守护代码
//在跳转前执行
router.beforeEach((to,from,next)=>{
    // to 到哪个页面去
    // from 从哪个页面来
    // next 只有执行了next方法，才可以跳转到对应的页面（路由）
    //判断用户是否登录
    //console.log("store",store.state.uInfo.userInfo);
    const uInfo = store.state.uInfo.userInfo;//做actions中一个假的登录功能，
    if (!uInfo.userAccount) {
        if (to.path === "/login" || to.path === "/regist" ) {
            //如果是跳转到登录页或注册页，直接放行
            next();
            return;
        }
        next("/login");
    }else{
        next();//登录了，直接通过
    }

});

现在的写法

router.beforeEach((to,from,next)=>{
  //to到哪一个路由,from从哪一个路由来的,next是否调用下一个路由
  //获得存储中变量，判断这个值是否存在，如果存在，说明已经登录成功了，如果不存在，如果路由是‘/login’,或者‘/register’，放过
  let userInfo = store.state["userStore"]["userInfo"];
  //if(!userInfo.userName ){ 最好不要使用字符串类型，进行判断，会时灵时不灵，用数字比较稳定性较好
  if(userInfo.id > 0 ){
    next();//通过
  }else{
    //再次判断是否，登录或注册
    if (to.path === "/login" || to.path === "/regist" ) {
        //如果是跳转到登录页或注册页，直接放行
        next();//通过
        return;
    }
    next("/login");//跳转到登录
  }
})

重点是
const uInfo = store.state.uInfo.userInfo;//做actions中一个假的登录功能，

以前是可以写的，现在在vscode中报错，虽然已经把ts的语法配置改成了非严格型，但是编译仍然报错，通过控制台输出对象，对象是存在的，就是不能编译通过，郁闷。

使用下面的写法就可以，

 let userInfo = store.state["userStore"]["userInfo"];

自己记录一下，如果对大家有帮助，荣幸之至