0

I want to transfer data between pages in multipage vue app. I tried vuex with store but it's not working.

I used vue.config.js file to make multipage app. each page has App.vue and main.js to itself. When I import store.js to main.js, Initiate it there and it works only for it's own App.vue. But I need to transfer data from one page to another page. from one App.vue to another App.vue.

(Eg:- when I click on a person's name on one page, it should load that person's profile with his details. (It is an another page)). My plan was when someone click on the profile picture, details about that person goes to the store and I wanted to retrieve them in profile page. It didn't work. I'm a newbie to Vue. Am I doing it wrong way? Is there a better way doing this? Could someone help me to make this success? Thank you!

ps- Database is also attached. If there is a way to pass the reference between pages that will work too.

part of 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

I followed the method in below thread to make a multipage app

https://stackoverflow.com/questions/51692018/multiple-pages-in-vue-js-cli
Akila Godigamuwa
  • 21
  • 3
  • 1
    HTML protocol is stateless. It is very hard to share any data between one page (HTML file) loaded after another (not impossible tho). That's why session exists in most server side frameworks. From your question (especially "when I click on a person's name on one page, it should load that person's profile with his details") it seems that what you want is single page application (SPA) using Vue Router ....not multipage aplication – Michal Levý Jul 16 '21 at 18:34

1 Answers1

0

If you want to have the same Vuex store using your app in different tabs try to use vuex persisted state plugin. Plugin would save your store in localStorage and that would give you possibility to share the same store between different tabs (or different instances of your app if you wish).

Eduardo
  • 1,086
  • 5
  • 19