如何在多页 vue 应用程序中的页面之间传输状态？

Posted 2023-02-22

【中文标题】如何在多页 vue 应用程序中的页面之间传输状态？

【英文标题】：How to transfer state between pages in multipage vue app?

【发布时间】：2021-09-25 12:50:27

【问题描述】：

我想在多页 vue 应用中的页面之间传输数据。我用 store 尝试了 vuex，但它不起作用。

我使用 vue.config.js 文件来制作多页应用程序。每个页面本身都有 App.vue 和 main.js。当我将 store.js 导入 main.js 时，在那里启动它，它只适用于它自己的 App.vue。但我需要将数据从一页传输到另一页。从一个 App.vue 到另一个 App.vue。

（例如：- 当我在一个页面上单击一个人的姓名时，它应该加载该人的个人资料及其详细信息。（这是另一个页面））。我的计划是当有人单击个人资料图片时，有关该人的详细信息会进入商店，我想在个人资料页面中检索它们。它没有用。我是 Vue 的新手。我做错了吗？有没有更好的方法来做到这一点？有人可以帮助我取得成功吗？谢谢！

ps- 还附加了数据库。如果有办法在页面之间传递引用也可以。

vue.config.js 的一部分

module.exports = 
pages: 
  'index': 
    entry: './src/pages/home/main.js',
    template: 'public/index.html',
    title: 'Home',
    chunks: [ 'chunk-vendors', 'chunk-common', 'index' ]
  ,
  'register': 
    entry: './src/pages/register/main.js',
    template: 'public/index.html',
    title: 'Register',
    chunks: [ 'chunk-vendors', 'chunk-common', 'register' ]
  ,
  'login': 
    entry: './src/pages/login/main.js',
    template: 'public/index.html',
    title: 'Login',
    chunks: [ 'chunk-vendors', 'chunk-common', 'login' ]
  ,

store.js

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

Vue.use(Vuex);

export const store = new Vuex.Store(
   state:
    //this is not real data
    i:0
,

Part of my code editor's file stack to get a better idea

我按照下面线程中的方法制作了一个多页应用程序

https://***.com/questions/51692018/multiple-pages-in-vue-js-cli

【问题讨论】：

HTML 协议是无状态的。在一个接一个加载的页面（HTML 文件）之间共享任何数据是非常困难的（并非不可能）。这就是大多数服务器端框架中存在会话的原因。从您的问题（尤其是“当我在一个页面上单击一个人的姓名时，它应该加载该人的个人资料及其详细信息”）看来您想要的是使用 Vue Router 的单页应用程序（SPA）......而不是多页应用

【参考方案1】：

如果您想在不同的选项卡中使用您的应用程序拥有相同的Vuex store，请尝试使用vuex persisted state 插件。插件会将您的商店保存在 localStorage 中，这样您就可以在不同的选项卡（或您的应用程序的不同实例，如果您愿意）之间共享同一个商店。