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

Question

我想在多页vue应用程序中的页面之间传输数据。我在商店试用了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
},

我的代码编辑器的文件堆栈的一部分，以获得更好的想法

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

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

Answer 1

如果您想在不同的选项卡中使用相同的Vuex store，请尝试使用vuex持久化状态插件。插件将把你的商店保存在localStorage中，这将使你有可能在不同的选项卡之间共享同一个商店(如果你愿意，也可以在你的应用程序的不同实例之间共享(。