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
             } 

        } 
    }

我是Vue的新手，我制作了一个虚拟登录页面，并尝试根据用户名使我的主页面显示sharedData。但是，在我的应用程序指向第B页后，数据总是丢失。我该如何解决这个问题？

Answer 1

您可以将sharedData作为网址参数传递：＆＃39; window.location.href =＆＃34; pageB.html？sharedData = myData＆＃34;＆＃39;并在另一页中访问它。如果你曾经使用vue-router，你可以做

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方式

您可以使用centralised state management来管理共享数据，除非您重新加载页面，否则这些数据将在整个页面中提供。

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

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方式

然而，Vue生态系统还拥有一个专用的redux状态管理系统，称为vuex，在社区中非常受欢迎。您将所有项目/用户等存储在vuex state中，每个组件都可以来自中央状态read / update。如果它由一个组件更改，则所有组件都可以反应性地使用更新版本。您可以使用vuex中的actions在一个位置启动数据。

以下是架构图：

您可以查看我在类似问题上的答案here，并查看如何调用api并在商店中保存数据的示例。

Answer 2

对于那些次要的事情，你看起来并不需要采用国家管理。如果您只是想将数据从一个子组件传递到另一个子组件，那么我建议使用事件总线。

Non Parent-Child Communication

有时两个组件可能需要彼此通信，但它们不是彼此的父/子。在简单的场景中，您可以使用空的Vue实例作为中央事件总线：

$scope.$on('headphones-Updated', function(event, args) {


});

在更复杂的情况下，您应该考虑使用专用的state-management pattern。

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

2 个答案:

Vue方式

更好的Vue方式：Vuex方式

Non Parent-Child Communication