Vue：不同页面之间共享数据

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
             } 

        } 
    }

我是 Vue 新手，我制作了一个虚拟登录页面，并尝试让我的主页根据用户名显示共享数据。但我的应用程序重定向到页面 B 后数据总是丢失。我该如何解决此问题？

您可以通过sharedData作为 URL 参数：'window.location.href="pageB.html?sharedData=myData"' 并在其他页面中访问它。如果你一直在使用vue-路由器，你可以这样做

this.$route.params.sharedData

由于您没有使用它，因此您可以使用普通的 javascript 来获取它，但是您必须编写一个如下所示的辅助函数来获取参数，如下所示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

您可以使用集中状态管理管理您的共享数据，除非您重新加载页面，否则这些数据将跨页面可用。

您可以定义您的状态，如下所示：

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

您可以在组件中使用它，如下所示：

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

更好的 Vue 方式：Vuex way

然而，Vue 生态系统有一个专门的redux也像状态管理系统一样，称为vuex这在社区中很受欢迎。您将所有项目/用户等存储在 vuex 中state，并且每个组件可以read/update来自中央国家。如果一个组件更改了它，则更新的版本可反应性地供所有组件使用。您可以使用以下方式在一个地方启动数据actions在 vuex 本身。

架构图如下：

你可以看看我的回答here关于类似的问题，请查看有关如何调用 api 并将数据保存在存储中的示例。