Vue 项目中优化小智聊天功能和页面性能

2023-09-28 11:02:20

前言

黑马头条项目进行到第九天，今天的主要任务是优化小智聊天功能和页面性能，具体包括创建独立组件实现小智聊天，并进行页面缓存和滚动条记忆优化。

小智聊天组件的创建

为了实现与小智的独立聊天，我们创建了一个新的组件 chat.vue，并为其配置了单独的路由。

// chat.vue
<template>
  <div>
    <!-- 与小智聊天的代码 -->
  </div>
</template>

// chat.js
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Chat'
})

// router.js
{
  path: '/chat',
  component: Chat
}

页面缓存优化

为了提升页面性能，我们对主要页面进行缓存处理。

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

new Vue({
  render: h => h(App),
  // 启用页面缓存
  beforeCreate() {
    this.$store.registerModule('cache', {
      namespaced: true,
      state: {
        pages: {}
      },
      getters: {
        getPage: (state) => (name) => state.pages[name]
      },
      mutations: {
        setPage: (state, { name, data }) => {
          state.pages[name] = data
        }
      }
    })
  }
}).$mount('#app')

滚动条记忆优化

为了让用户在浏览页面时拥有更流畅的体验，我们实现了滚动条记忆功能。

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

new Vue({
  render: h => h(App),
  beforeCreate() {
    this.$store.registerModule('scroll', {
      namespaced: true,
      state: {
        scrollTop: 0
      },
      getters: {
        getScrollTop: (state) => state.scrollTop
      },
      mutations: {
        setScrollTop: (state, scrollTop) => {
          state.scrollTop = scrollTop
        }
      }
    })
  }
}).$mount('#app')