Vue组件优雅的使用Vuex异步数据

今天在检查代码的时候发现了一个平时都忽略的问题,就是在组件使用vuex数据时,组件使用都是同步取的`vuex`值。关于`vuex`的使用可以查看官网文档:https://vuex.vuejs.org/zh/,如果我们需要的`vuex`里面的值是异步更新获取的,在网络和后台请求特别快的情况下不会有什么问题。但是网络慢或者后台数据返回较慢的情况下问题就来了。

Vue组件优雅的使用Vuex异步数据

前端:Vue+element

项目为前后端分离项目,通过Ajax交换数据。

更新时间:2020-09-10 19:11:42

0x1 缘起

今天在检查代码的时候发现了一个平时都忽略的问题,就是在组件使用vuex数据时,组件使用都是同步取的vuex值。关于vuex的使用可以查看官网文档:https://vuex.vuejs.org/zh/ ,如果我们需要的vuex里面的值是异步更新获取的,在网络和后台请求特别快的情况下不会有什么问题。但是网络慢或者后台数据返回较慢的情况下问题就来了。

0x2 案例

${app}代表你的项目根目录,项目目录结构同大部分Vue项目。

需求

我需要实现这样一个效果,我需要在foo.vue,bar.vue,两个不同的页面建立一个使用相同信息的socket连接,当我离开foo.vue页面的时候断开连接,在bar.vue页面的时候重新连接。而且我的socket连接信息(连接地址,端口等)来自于接口请求。

初次实现

App.vue初始化的时候dispatch一个action去获取socket的连接信息,然后在foo.vue或者bar.vue页面mounted的时候进行连接。

Vuex

${app}/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import api from '@/apis'
import handleError from '@/utils/HandleError'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    socketInfo: {
      serverName: '',
      host: '',
      port: 8080
    }
  },
  mutations: {
    // Update token
    UPDATE_SOCKET_INFO(state, { socketInfo }) {
      // state.socketInfo = socketInfo
      // Update vuex token
      Object.assign(state.socketInfo, socketInfo)
    }
  },
  actions: {
    // Get socket info
    async GET_SOCKET_INFO({ commit }) {
      // Rquest socket info
      try {
        const res = await api.Common.getSocketUrl()
        // Success
        if (res.success) {
          commit('UPDATE_SOCKET_INFO', {
            socketInfo: res.obj
          })
        }
      } catch (e) {
        // Handle api request exception
        handleError.handleApiRequestException(e)
      }
    }
  }
})

App.vue

${app}/src/App.vue

<!-- App -->
<div id="app"></div>
export default {
  name: 'App',
  mounted() {
    // Get socket info
    this.$store.dispatch('GET_SOCKET_INFO')
  }
}

foo.vue

${app}/src/views/foo/foo.vue

import io from 'socket.io-client'
export default {
  name: 'Foo',
  mounted() {
    const { serverName, host, port } = this.$store.state.socketInfo
    const socket = io(`ws://${host}:${port}`, {
      path: `/${serverName}`,
      transports: ['websocket', 'polling']
    })
  }
}

❓ 问题

问题很显而易见,当我直接访问foo.vue页面的时候,如果我的后台api或者网络请求慢的情况下,我的vuexstore还未更新,也就是App.vue的请求还未回来,这个时候foo.vue页面的mounted生命周期函数已经执行,很显然,我需要的socket连接信息拿不到,这个时候控制台就会飘红。

WebSocket connection to 'ws://%27%27/''/?EIO=3&transport=websocket' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

✅ 第一次解决

既然是需要等到请求回来在连接,那么好办了,我在foo.vue页面也获取一次socket的连接信息获取成功了在进行连接,此时foo.vue代码变成了如下这样

foo.vue

${app}/src/views/foo/foo.vue

import io from 'socket.io-client'

import api from '@/apis'
import handleError from '@/utils/HandleError'
export default {
  name: 'Foo',
  async mounted() {
    // Rquest socket info
    try {
      const res = await api.Common.getSocketUrl()
      // Success
      if (res.success) {
        commit('UPDATE_APP_SESSION_STATUS', {
          socketInfo: res.obj
        })

        // Connect to socket
        const { serverName, host, port } = this.$store.state.socketInfo
        const socket = io(`ws://${host}:${port}`, {
          path: `/${serverName}`,
          transports: ['websocket', 'polling']
        })
      }
    } catch (e) {
      // Handle api request exception
      handleError.handleApiRequestException(e)
    }
  }
}

❓ 新的问题

上一个办法确实解决了问题,但是新的问题又来了,我发了两次请求,每个页面都要写一个请求。仔细想想这要是个十几二十个页面都要用的方法,那不得累死?有没有更好的解决办法呢?答案是有的。

✅ 第二次解决

既然我在foo.vue页面需要等待vuex的更新,那我监听一下socketInfo的更新,有更新我在连接,然后在mounted里面判断socketInfo是否有值再连接不就可以了吗。这个时候foo.vue页面的代码变成了下面这样

foo.vue

${app}/src/views/foo/foo.vue

import io from 'socket.io-client'

import api from '@/apis'
import handleError from '@/utils/HandleError'
export default {
  name: 'Foo',
  async mounted() {
    if (this.$store.state.socketInfo.host) {
      // Handle create socket
      this.handleCreateSocket()
    }
  },
  watch: {
    '$store.state.socketInfo.host'() {
      if (this.$store.state.socketInfo.host) {
        // Handle create socket
        this.handleCreateSocket()
      }
    }
  },
  methods: {
    // Handle create socket
    handleCreateSocket() {
      // Connect to socket
      const { serverName, host, port } = this.$store.state.socketInfo
      const socket = io(`ws://${host}:${port}`, {
        path: `/${serverName}`,
        transports: ['websocket', 'polling']
      })
    }
  }
}

这里为啥监听的是$store.state.socketInfo.host呢,因为我们的mutations里面的UPDATE_SOCKET_INFO更新socketInfo的方式是Object.assign(),这种更新方式的好处是,如果api请求返回的字段是这样的一个对象,少了port字段(后台开发更新字段很常见)

{
    "serverName":"msgServer1",
    "host":"192.168.0.2",
}

我自己的socketInfo对象

{
    "serverName":"",
    "host":"",
    "port":"8080"
}

假如我在初始化state的时候指定一个默认的端口,Object.assign()合并的对象,只会合并我没有的,并且更新与我socketInfo键值对相同的键的值,这样我的socketInfo对象依然是有一个默认的端口,更新后为

{
    "serverName":"msgServer1",
    "host":"192.168.0.2",
    "port":"8080"
}

我的socket依然能够连接上。不至于报错。回到之前的问题,如果我们监听的是$store.state.socketInfo,这是个引用类型的对象,你会发现watch不会执行,因为你的对象没有改变。

关于JavaScript引用数据类型和基础数据类型可以查看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types

简单易懂的:https://segmentfault.com/a/1190000008472264

❓ 思考新的问题

目前看来完成我的需求是不会有什么问题了。但是这样是完美的了吗?

如果我的foo.vue页面不只是创建连接的时候需要取vuex的数据,我在页面渲染的时候,也需要vuex里面的数据。比如我的foo.vue,和bar.vue都需要显示我的网站名,网站名是通过接口拉取存在vuex的。这个时候怎么办呢?,刚刚解决上面问题的办法就无能为力了。毕竟mounted不能阻止页面渲染。

✅ 最佳方案?

借用watch的方案,我在页面判断一下vuex的值是否更新,然后再渲染不就ok了嘛?这也是很多网站骨架屏渲染的使用场景。

很多网站在刚刚打开的一刻,数据未准备好的时候是会显示一个骨架加载的动画,等到加载完毕再把内容呈现给用户。看代码

${app}/src/views/foo/foo.vue

<div>
  <!-- 我的网站名 -->
  <div v-if="$store.state.webConfig.webName">{{ $store.state.webConfig.webName }}</div>
  <!-- 骨架屏 -->
  <skeleton v-else></skeleton>
</div>
import io from 'socket.io-client'

import api from '@/apis'
import handleError from '@/utils/HandleError'
export default {
  name: 'Foo',
  async mounted() {
    if (this.$store.state.socketInfo.host) {
      // Handle create socket
      this.handleCreateSocket()
    }
  },
  watch: {
    '$store.state.socketInfo.host'() {
      if (this.$store.state.socketInfo.host) {
        // Handle create socket
        this.handleCreateSocket()
      }
    }
  },
  methods: {
    // Handle create socket
    handleCreateSocket() {
      // Connect to socket
      const { serverName, host, port } = this.$store.state.socketInfo
      const socket = io(`ws://${host}:${port}`, {
        path: `/${serverName}`,
        transports: ['websocket', 'polling']
      })
    }
  }
}

✅ 优化代码

vuexsocketInfo对象加一个isUpdated字段,如果更新了,直接取值进行我需要的操作,没更新的话就行请求api更新。这是目前能想到的比较优雅的方案了。

${app}/src/views/foo/foo.vue

<div>
  <!-- 我的网站名 -->
  <div v-if="webConfig.isUpdated">
    {{ webConfig.webName }}
  </div>
  <!-- 骨架屏 -->
  <skeleton v-else></skeleton>
</div>
import io from 'socket.io-client'
import { mapState } from 'vuex'

import api from '@/apis'
import handleError from '@/utils/HandleError'
export default {
  name: 'Foo',
  computed: {
    ...mapState(['webConfig', 'socketInfo'])
  },
  async mounted() {
    // Handle get socket info
    this.handleGetSocketInfo()
  },
  methods: {
    // Handle create socket
    handleCreateSocket() {
      // Connect to socket
      const { serverName, host, port } = this.$store.state.socketInfo
      const socket = io(`ws://${host}:${port}`, {
        path: `/${serverName}`,
        transports: ['websocket', 'polling']
      })
    },
    // Handle get socket info
    handleGetSocketInfo() {
      if (this.socketInfo.isUpdated) {
        // Handle create socket
        this.handleCreateSocket()
      } else {
        this.$store.dispatch('GET_SOCKET_INFO', this.handleCreateSocket)
      }
    }
  }
}

${app}/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import api from '@/apis'
import handleError from '@/utils/HandleError'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    socketInfo: {
      serverName: '',
      host: '',
      port: '',
      isUpdated: false
    },
    webConfig:{
      webName: '',
      isUpdated: false
    }
  },
  mutations: {
    // Update token
    UPDATE_SOCKET_INFO(state, { socketInfo }) {
      // state.socketInfo = socketInfo
      // Update vuex token
      Object.assign(
        state.socketInfo,
        {
          isUpdated: true
        },
        socketInfo
      )
    }
  },
  actions: {
    // Get socket info
    async GET_SOCKET_INFO({ commit }, callback) {
      // Rquest socket info
      try {
        const res = await api.Common.getSocketUrl()
        // Success
        if (res.success) {
          commit('UPDATE_SOCKET_INFO', {
            socketInfo: res.obj
          })
          // Call back you custom function
          if (callback) {
            callback()
          }
        }
      } catch (e) {
        // Handle api request exception
        handleError.handleApiRequestException(e)
      }
    }
  }
})

由于在foo.vue页面需要使用数据的时候我们才去请求数据,因此App.vue的请求可以取消,这样一来用户只是打开我们的网站,并不会去请求无意义的数据。优化了后台的接口请求压力。同时在第一次进入foo.vue页面的时候已经请求了数据,如果用户没有刷新页面,再次访问该页面我们的socketInfo对象的isUpdatedtrue,可以直接使用,不会去发送新的请求。

${app}/src/App.vue

<!-- App -->
<div id="app"></div>
export default {
  name: 'App',
}

🤗更新方案

既然是进入页面之后可以判断数据是否加载完毕,我们也可以直接在页面进入之前,通过路由元信息配置该页面需要的全局异步数据,然后通过路由跳转的守卫去拉取异步数据(全局公用的异步数据只需要加载一遍就行,如果加载失败我们可以跳转到服务器错误页面)。完了再显示我们的页面,同时使用Promise.all来进行多个异步数据的读取。nice~!上代码

${app}/src/utils/permission.js

这个文件用来做路由拦截。

/**
 * @name Global router permission controller
 * @description Do not delete comments
 * @author SunSeekerX
 * @time 2019-08-20 11:14:34
 * @LastEditors: SunSeekerX
 * @LastEditTime: 2020-05-21 15:28:39
 */

import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
NProgress.configure({ showSpinner: false }) // NProgress Configuration

import router from '@/router'
import store from '@/store'
import { i18n } from '@/lang/index'
import { NotifyFun, handleApiRequestException } from '@/utils/handle-error'

router.beforeEach(async (to, from, next) => {
  // 启动进度条
  NProgress.start()
  
  // 公用vuex数据
  const {
    siteConfig,
    appConfig,
    socketInfo,
    coinDecimal,
  } = store.state.appSessionStatus

  try {
    // 异步任务列表
    const task = []
    // 站点信息
    if (!siteConfig.isUpdated) {
      task.push(store.dispatch('GET_SITE_CONFIG'))
    }
    // 站点配置
    if (!appConfig.isUpdated) {
      task.push(store.dispatch('GET_APP_CONFIG'))
    }

    /**
     * @name 检查前去的页面需要的公用数据是否加载
     */
    if (to.meta.isUsingCoinDecimal && !coinDecimal.isUpdated) {
      // 需要全局小数点位数
      task.push(store.dispatch('GET_COIN_DECIMAL'))
    }

    if (to.meta.isUsingSocketInfo && !socketInfo.isUpdated) {
      // 需要全局socket链接信息
      task.push(store.dispatch('GET_SOCKET_INFO'))
    }

    // 异步同时执行请求任务
    await Promise.all(task)
  } catch (error) {
    // 提示错误
    handleApiRequestException(error)

    // 显示网络错误白屏图
    store.commit('UPDATE_SERVER_ERROR', true)

    // 请求失败,路由导航终止
    return next(false)
  } finally {
    NProgress.done()
  }

  // Permission
  if (store.state.token) {
    // Has login
    next()
  } else {
    // 判断是否是公开页面
    if (to.meta.isPublic) {
      next()
    } else {
      // Redirect to login
      next('/user/user-login')
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

路由配置

${app}/src/router/Exchange.js

/**
 * @name Exchange.js
 * @author SunSeekerX
 * @time 2019-09-21 10:51:25
 * @LastEditors: SunSeekerX
 * @LastEditTime: 2020-05-21 14:59:37
 */

import { i18n } from '@/lang/index'

export default [
  // 币币交易》首页
  {
    path: '/exchange',
    name: 'ExchangeIndex',
    component: () => import('@/views/exchange/index/index'),
    meta: {
      title: i18n.t('Title_Exchange'),
      // 代表路由权限公开
      isPublic: true,
      // 需要socketInfo信息
      isUsingSocketInfo: true,
      // 需要coinDecimal信息
      isUsingCoinDecimal: true,
    },
  },
]

0x3 总结

记录下自己平时解决问题的思考方式和解决方案。

本文章代码仅用工具检查语法错误,纯手写,并未实际运行,不保证逻辑合理,如果你有更好的方案,欢迎你和我讨论。

有问题才有更好的解决方案。谢谢你的阅读。

0x4 谢谢你的阅读 💝

关于我

SunSeekerX,前端开发、Nodejs开发、小程序、uni-app开发、等等

喜欢探讨技术实现方案和细节,完美主义者,见不得bug

Github:https://github.com/SunSeekerX

个人博客:/

个人在线笔记:https://sunseekerx.yoouu.cn/