时间戳

首页 > 解决方案 > 如何在多页 vue 应用程序中的页面之间传输状态？

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

问题描述

我想在多页 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
},

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

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

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

标签： javascriptvue.jsvuejs2statevuex

解决方案

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

推荐阅读