什么是 vuex ?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 (要按照规定的方式改变数据)面对一个储存状态数据的工具时, 有几个方面的问题我们马上可以想到的
数据放在哪里 store state如何存入/更新数据 commit mutation如何获取数据 this.$store.state.模块.数据字段vuex的优点：
js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染vuex的缺点：
刷新浏览器，vuex中的state会重新变为初始状态 解决方案-插件vuex-persistedstate项目中遇到vuex此缺点的处理 场景 - 用户登录，提交订单之后，跳转到付款页，在created发送axios请求，获取付款二维码字符串等信息。但是刷新之后，请求响应是401 Unauthorized，看headers是Bearer undefined。
created: function () { this.$axios({ url: "/airorders/" + this.$route.query.id, headers: { Authorization: "Bearer " + this.$store.state.user.userInfo.token, }, }).then((res) => { console.log(res.data); }); },
原因分析 - 不可以直接在created获取数据，因为直接跳转过来没问题，但是一刷新，vuex的token就没有了，created的时候localstorage的token还没回来。
行动
如果是在本页面刷新, 就会没有 token, 只能在 watch里面 进行监听如果正常跳转 token 本身存在, 监听不到改变, 可以通过 watch 的 immediate 属性 实现 watch: { "$store.state.user.userInfo.token": { handler: function () { if (this.$store.state.user.userInfo.token) { this.$axios({ url: "/airorders/" + this.$route.query.id, headers: { Authorization: "Bearer " + this.$store.state.user.userInfo.token, }, }).then((res) => { console.log(res.data); }, immediate: true, }, },