面试题：Vue Pinia模块化设计与命名空间下的数据持久化及SSR优化

实现思路

模块化设计与命名空间：利用Pinia的模块化特性，将不同业务逻辑的数据分别定义在不同的Store中，并通过命名空间区分。例如，创建一个userStore用于管理用户相关数据，一个productStore用于管理商品相关数据。
数据持久化：借助浏览器本地存储实现数据持久化。在Store的数据变化时，将数据同步存储到本地；在应用启动时，从本地读取数据并初始化Store。
服务器端渲染（SSR）：在SSR场景下，确保服务器端和客户端的数据一致性。通过在服务器端初始化Store时，从请求头或其他途径获取已有的数据状态，在客户端激活时，利用客户端已有的数据状态，避免重复请求。同时，优化数据获取逻辑，减少不必要的数据传输。

关键代码

创建Pinia Store

import { defineStore } from 'pinia';

// 以userStore为例
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: null
  }),
  actions: {
    setUserInfo(info) {
      this.userInfo = info;
      localStorage.setItem('userInfo', JSON.stringify(info));
    },
    setToken(token) {
      this.token = token;
      localStorage.setItem('token', token);
    },
    loadFromLocalStorage() {
      const userInfo = localStorage.getItem('userInfo');
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo);
      }
      const token = localStorage.getItem('token');
      if (token) {
        this.token = token;
      }
    }
  }
});

在Vue组件中使用Store

<template>
  <div>
    <button @click="setUserAndToken">设置用户信息和Token</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore';
const userStore = useUserStore();

const setUserAndToken = () => {
  userStore.setUserInfo({ name: 'John', age: 30 });
  userStore.setToken('123456');
};

// 在组件挂载时从本地存储加载数据
onMounted(() => {
  userStore.loadFromLocalStorage();
});
</script>

SSR相关代码 在服务器端，例如在Nuxt.js（基于Vue的SSR框架）中，可以在nuxtServerInit action中初始化Store数据：

// store/user.js
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: null
  }),
  actions: {
    async nuxtServerInit({ commit }, { req }) {
      // 假设从请求头中获取用户信息和Token
      const userInfo = req.headers['user-info'];
      const token = req.headers['token'];
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo);
      }
      if (token) {
        this.token = token;
      }
    }
  }
});

可能遇到的问题及解决方案

数据序列化与反序列化问题
- 问题：在本地存储和从本地存储读取数据时，可能会因为数据类型转换错误导致数据丢失或损坏。例如，存储的数据中有函数或循环引用对象时，JSON.stringify会忽略函数，循环引用对象会报错。
- 解决方案：在存储数据前，确保数据结构简单，只存储可序列化的数据。对于复杂数据，可进行预处理，例如将函数转换为字符串表示，对于循环引用对象，可提取关键数据。在读取数据后，根据需要进行数据还原。
SSR数据一致性问题
- 问题：服务器端和客户端获取数据的时机和方式不同，可能导致数据不一致。例如，在服务器端获取数据后，客户端又重新请求了一次，可能导致数据版本不一致。
- 解决方案：在服务器端获取数据后，将数据传递给客户端，例如通过在HTML中注入数据。在客户端激活时，优先使用服务器端传递的数据，避免重复请求。可以在SSR框架中设置数据传递机制，如Nuxt.js的context对象传递数据。
性能问题
- 问题：频繁操作本地存储会影响性能，特别是在数据量较大时。同时，SSR场景下，如果数据获取逻辑复杂，可能会导致服务器端响应时间过长。
- 解决方案：减少不必要的本地存储操作，例如批量更新数据而不是每次数据变化都进行存储。对于SSR性能问题，优化数据获取逻辑，如采用缓存策略，减少数据库查询次数；对数据进行分页处理，避免一次性获取大量数据。

星途面试题库

面试题：Vue Pinia模块化设计与命名空间下的数据持久化及SSR优化

知识考点

面试题答案

实现思路

关键代码

可能遇到的问题及解决方案