如何在点击时更新多个仪表板组件 - Vue.js答案

【问题标题】：How to update multiple dashboard components on click - Vue.js如何在点击时更新多个仪表板组件 - Vue.js
【发布时间】：2019-08-04 17:45:41
【问题描述】：

我发现很难在网上找到有关此问题的帮助，因为似乎没有任何示例与我的用例相匹配。我基本上是想检查我的方法是否走在正确的轨道上。我有一个单页 Vue 应用程序：

右边的每一行都是一个组件。左侧列出了三个数据集，每个数据集都具有仪表板中字段的值。我希望这样当您单击数据集时，该集合的每个字段都会更新。因此，如果您点击“床”，标题将变为“床”，并且所有字段都会填充床的特定数据。

我想在不为每个数据集设置单独页面的情况下执行此操作，因为这似乎违背了使用像 Vue 这样的反应式框架的意义。只有嵌入的组件应该改变，而不是页面。

我已经安装了 Vue Router 并探索了使用插槽和动态组件，但很难理解。

如果有 Vue 经验的人可以让我知道正确的广泛方法，那么我就知道我需要研究什么，目前很难知道从哪里开始。谢谢

【问题讨论】：

至少显示你尝试过什么

标签： vue.js

【解决方案1】：

您可以为此目的使用Vuex。

向状态添加属性，例如dataset。和突变来改变它。右侧的每个组件都应该使用this.$store.state.dataset（或通过mapState）来实现自己的目的。因此，当您选择左侧列出的数据集之一时，它将使用自己的数据对存储中的数据集进行变异。

类似的东西：

store（还有其他版本，我们可以在其中使用 getter，但仅作为示例，它有点复杂）。

import Vue from 'vue';

const store = new Vuex.Store({
  state: {
    dataset: {}
  },
  mutations: {
    setDataset(state, payload) {
      Vue.set(state, 'dataset', payload);
    }
  }
});

右侧组件之一

computed: {
  dataset() {
    return this.$store.state.dataset;
  },
  keywords() {
    return this.dataset.keywords;
  },
  volume() {
    return this.dataset.volume;
  }
}

左侧菜单
模板：

<a href="#" v-for="dataset in datasets" @click="changeDataset(dataset)" :key="dataset.id">{{dataset.title}}</a>

代码：

data() {
  return {
    datasets: [{
      id: 1,
      title: 'Sofas',
      keywords: ['foo'],
      volume: 124543
    }]
  }
},
methods: {
  changeDataset(dataset) {
    this.$store.commit('setDataset', dataset);
  }
}

datasets 是您从服务器加载的数据。

但是您可以为此使用一些全局变量，而无需Vuex。也许是 Vue observable，在 2.6 中添加。

【讨论】：