Vue:不同页面之间共享数据 [英] Vue: shared data between different pages

问题描述

var app = new Vue({el: '#app',数据: {共享数据:"},方法: {goToPageB:函数(){如果(满足某个条件){window.location.href="pageB.html";共享数据 = 1234;<------- 我也想访问B页中的sharedData}}}

我是 Vue 的新手，我做了一个虚拟登录页面，并尝试让我的主页根据用户名显示 sharedData.但是在我的应用程序定向到页面 B 后数据总是丢失.我该如何解决这个问题?

解决方案

您可以将 sharedData 作为 URL 参数传递: 'window.location.href="pageB.html?sharedData=myData"' 并在另一个页面中访问它.如果你一直在使用

您可以在此处查看我对类似问题的回答，并查看有关如何调用 api 的示例并将数据保存在存储中.

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 am new to Vue, i made a dummy login page and try to make my main page display sharedData according to the username. But the data is always lost after my app directs to Page B. How can I fix this?

解决方案

You can pass the sharedData as an URL param : 'window.location.href="pageB.html?sharedData=myData"' and access it in the other page. If you would had been using vue-router, you could just do

this.$route.params.sharedData

As you are not using it, You can just use plain javascript to get it, however you will have to write a helper function like following to get the params, as explained 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 way

You can use a centralised state management to manage your shared data, which will be available across page unless you reload the page.

You can define you state, like 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 like following:

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

A Better Vue way: Vuex way

However Vue ecosystem havs a dedicated a redux like state management system as well, called vuex which is quite popular among community. You store all your projects/users etc in vuex state, and each component can read/update from the central state. If its changed by one component, updated version is available to all components reactively. You can initiate the data in one place using actions in vuex itself.

Following is the architecture diagram:

You can have a look at my answer here on similar question and have a look at example on how to call api and save data in store.

这篇关于Vue:不同页面之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！