vuex的优缺点_vuex的弊端

什么是 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);
    });
  },
1
2
3
4
5
6
7
8
9
10

原因分析 - 不可以直接在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,
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15