如何在多页vue应用中进行页面间的状态转移？

Question

我想在多页vue应用程序的页面之间传输数据。我试过vuex和store，但它不起作用。

我用vue.config.js文件制作了多页应用程序。每个页面都有自己的App.vue和main.js。当我将store.js导入main.js时，在那里初始化它，它只对它自己的App.vue起作用。但我需要将数据从一个页面传输到另一个页面。从一个App.vue到另一个App.vue。

(例如：-当我在一个页面上点击一个人的名字时，它应该加载这个人的个人资料和他的详细信息。(这是另一个页面))。我的计划是，当有人点击个人资料图片时，该人的详细信息将转到商店，我想在个人资料页面中检索它们。它没有起作用。我是Vue的新手。我是不是做错了？有没有更好的方法来做这件事？有没有人能帮我取得成功？谢谢!

也附加了ps- Database。如果有一种方法可以在页面之间传递引用，那也是可行的。

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://stackoverflow.com/questions/51692018/multiple-pages-in-vue-js-cli

Answer 1

如果你想让你的应用在不同的标签页中使用相同的Vuex store，试着使用vuex persisted state插件。插件会将你的商店保存在localStorage中，这样你就有可能在不同的标签页(或者你的应用程序的不同实例)之间共享同一个商店。