什么是 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,
},
},