🔥系列专栏：面试宝典 🎉欢迎关注👀点赞👍收藏⭐留言📝 🥇个人主页：hacker_demo的51CTO博客 💬个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待💖💖💖

6cca30376d389080e4ff9ba305ce12a3.jpeg (前端面试题)

VueX是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

路由守卫

导航守卫(全局守卫、路由独享守卫、组件内守卫) 全局守卫 router.beforeEach((to,from,next)=>{})

回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。 组件内的守卫 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

在Admin.vue文件中，点击转到admin路由时，执行beforeRouteEnter函数 to，from参数与上面使用方法一致。next回调函数略有不同。 如下例，data 组件内守卫有特殊情况，如果我们直接以 beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。 路由独享的守卫

  1. beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

Vuex原理（简洁版）

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时， 必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。 而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的， 还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。