什么是 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还没回来。

行动

  1. 如果是在本页面刷新, 就会没有 token, 只能在 watch里面 进行监听
  2. 如果正常跳转 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,
    },
  },
Logo

前往低代码交流专区

更多推荐