Vue: shared data between different pages

Question

var app = new Vue({ el: '#app', data: { sharedData : "" }, methods: { goToPageB: function() { if (some condition is met) { window.location.href="pageB.html"; sharedData = 1234; <------- I want to access sharedData in page B as well } } } 

I'm new to Vue, I made a dummy login page and tried to make my main page display sharedData according to the username. But the data is always lost after my application is directed to page B. How can I fix this?

Answer 1

You can pass sharedData as the parameter URL: 'window.location.href = "pageB.html? SharedData = myData" and access it on another page. If you were to use vue-router , you could just do

 this.$route.params.sharedData 

Since you are not using it, you can simply use simple javascript to get it, however you will need to write a helper function like the following to get the parameters as described here

 var QueryString = function () { // This function is anonymous, is executed immediately and // the return value is assigned to QueryString! var query_string = {}; var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); // If first entry with this name if (typeof query_string[pair[0]] === "undefined") { query_string[pair[0]] = decodeURIComponent(pair[1]); // If second entry with this name } else if (typeof query_string[pair[0]] === "string") { var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ]; query_string[pair[0]] = arr; // If third or later entry with this name } else { query_string[pair[0]].push(decodeURIComponent(pair[1])); } } return query_string; }(); 

Vue path

You can use centralized state management to manage your shared data, which will be available on the page if you do not reload the page.

You can determine your condition, for example the following:

 var store = { state: { message: 'Hello!' }, setMessageAction (newValue) { this.state.message = newValue }, clearMessageAction () { this.state.message = 'action B triggered' } } 

and you can use it in your components, for example:

 var vmA = new Vue({ data: { privateState: {}, sharedState: store.state } }) var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } }) 

Vue's best way: vuex way

However, the Vue ecosystem also has a special system for managing state redux systems called vuex , which is quite popular among the community, you save all your projects / users, etc. In vuex state , and each component can read / update from a central state. If it is changed to a single component, an updated version is available for all components reactively. You can initiate data in one place using actions in vuex itself.

The following is a diagram of the architecture:

You can see my answer here on a similar question and see an example on how to call api and save data in the store.

Answer 2

Actually, it doesn't seem like you need to use state management for something insignificant. If you just want to transfer data from one child component to another, I would suggest using an event bus.

Transmission of a non-parent child

Sometimes two components may need to exchange data with each other, but they are not parents / children of each other. In simple scenarios, you can use an empty Vue instance as the central event bus:

 var bus = new Vue() // in component A method bus.$emit('id-selected', 1) // in component B created hook bus.$on('id-selected', function (id) { // ... }) 

In more complex cases, you should consider using