前言

这篇文章本质是想请教一个问题的，最近在搭建一个多页面的vue3项目，多页面吗，这意味着我有多个main.ts入口文件，最后打包也会生成多个xxx.html文件，我想当项目很庞大的时候，又或者为了后期扩展，多页面有时候也是一个不错的选择，但这在实际场景中会出现这么一种情况。A页面会用到或者改变一个数据，B页面也会用到，这里注意下是页面之间的，不是路由，那么此时我并不想依赖于cookie或者localstorage或者sessionstorage等缓存，我想放在vuex里面或者说是pinia，毕竟一些很多的数据或者敏感的数据不想暴露出来。

个人想法

所以我想着是在最外层打造一个stores，然后里面去写公共的store模块，就如这样。

pages下面是多个页面文件，我写了一个common的模块，里面内容如下

import { defineStore } from 'pinia'
// import { store } from '../index'

interface CommonState {
  name: any
}

export const useCommonModulesStore = defineStore('commonModules', {
  state: (): CommonState => {
    return {
      name: ''
    }
  },
  getters: {
    getName(): any {
      return this.name
    }
  },
  actions: {
    setName(name: any) {
      this.name = name
    }
  }
})

// export const useAppStoreWithOut = () => {
//   return useCommonModulesStore(store)
// }

我个人的想法是每个需要用到的页面去导入这个useCommonModulesStore模块，并使用如下代码

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'

import router from './router'

// 引入状态管理
// import { setupStore } from '@/stores/index'

import { useCommonModulesStore } from '@/stores/modules/common'

import SvgIcon from '@/components/SvgIcon/index.vue'

import 'reset-css'
import 'vant/lib/index.css'
import 'virtual:svg-icons-register'

const app = createApp(App)

const store = createPinia()

useCommonModulesStore(store)

app.component('SvgIcon', SvgIcon)

app.use(store)

// app.use(setupStore)

app.use(router)

app.mount('#app')

useCommonModulesStore(store)便是使用该模块。

问题

项目是能正常跑的，但是出问题了，我在pageOne页面中去设置这个useCommonModulesStore模块里面的name值，打印出来也确实有。

但是我跳到pageTwo页面时，这个模块打印出来的数据却是空的。

仿佛被清空了一样，我也尝试了使用pinia-plugin-persist插件，但是无法改变，依旧如此。

个人理解

我隐隐猜测原因是，跳转页面，其实会重新将pinia的模块，重新createPinia()会附在新的app上，也就是这个createApp(App)，所以导致上一个页面虽然在这个模块中设置name属性，但是实际切换页面后依旧会清空，不知道我这个理解对不对，但我的想法目的是希望这个name的值存在。

最后

在这里想请教各位大佬有什么解决方案给到提供，十分感谢🙏