这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
前言
工作了一段时间感觉不会的东西越来越多，今天又翻看了一下vue的基础知识，再这里做一个小小的记录，方便以后的查看和分享。下面的小总结主要是vuex的一些基本内容。 路由拦截
路由拦截由导航守卫beforeEach实现，router.beforeEach可以配置对应的导航守卫。目的是为了保证用户在没有相关凭据时无法进入到某些页面。（为什么要用到路由拦截呢？这是因为通过路由路由拦截可以增加问我们网站的安全性，有了路由拦截当我们跳转任何页面的时候都要校验是否有权限，这样使得我们的网站安全性更高）
重定向
redirect，当我们想要访问/a时自动跳转到/b（这通常会在我们定义路由的使用用到）
别名
alias，当一个网址是/a的时候，设置了别名/b，这时访问/a或者/b都可以访问到同一个页面。
Vuex
Vuex是一个仓库，保存了vue中组件的数据，我们称之为状态（state）这在我们的稍微复杂的项目中都会用到，使用vuex会大大提升我们的开发效率，能帮助我们更好的掌控项目中的数据
如何使用
const store = new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {}
})
const app = new Vue({
el: '#app',
store
})
state
state中存储了组件里的数据，任何一个组件都可以直接获取到该数据。这就解决了我们vue中data中数据只能本页面使用的问题
this.$store.state
const 组件 = {
computed: {
state名字 () {
return this.$store.state.state名字
}
}
}
mutation
mutation是修改state的唯一操作，并且只能是同步操作（想要修改vuex中的值必须通过此中方法）
const store = new Vuex.Store({
mutations: {
setState (state, payload) {
// payload是commit mutation时传递过来的数据 state指的就是this.$store.state
}
}
})
action
用来请求后台接口，进行异步操作，最后把数据提交给mutation设置state
const store = new Vuex.Store({
actions: {
getData (context, payload) {
// payload是dispatch action时传递的数据 context就是一个store，如果为了方便可以使用解构赋值获取内部方法 {commit}
}
}
})
getters
getters可以动态的从state中获取数据，this.$store.getter名字（这种方式很方便，但不是很推荐用）
const store = new Vuex.Store({
getters: {
getter名字 (state, getters) {
return 值
}
}
})
总结
越工作感觉自己会的东西越少，一是因为一直在造轮子，没有时间学习新的知识，二是因为已经有了固有思维，已经习惯了用某种方式去工作，不想改变，但这样是不对的，要强迫自己去学习了，加油啊
