与另一个Vue组件共享对象

Question

我知道以前已经有人问过这个问题，但是作为Vue.js初学者，我在解释其他一些讨论并将其应用于我的情况时遇到了麻烦。使用这个CodeSandbox example，当按下相应的按钮时，如何将指示的对象从“ Hello”传递到“ Goodbye”？我不确定我是否应该尝试使用道具，全局事件总线，插件，vuex或仅使用某种全局变量。

编辑： 这是App.vue，Hello.vue和Goodbye.vue的代码（来自先前链接的CodeSandbox示例）。

App.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: "app"
};
</script>

Hello.vue：

<template>
  <div class="hello">
      <h1>This is Hello</h1>
    <div v-for="(obj, index) in objects" :key="index">
        <router-link class="button" :to="{ path: '/goodbye'}">Share obj[{{ index }}] with Goodbye</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      objects: [0, 1, 2, 3]
    };
  }
};
</script>

再见。

<template>
    <div class="goodbye">
      <h1>This is Goodbye</h1>
    <p>Obj = "???"</p>
    <router-link class="button" :to="{ path: '/hello'}">Hello</router-link>
  </div>
</template>

<script>
export default {
  name: "goodbye"
};
</script>

Answer 1

道具用于与子组件共享数据。由于这些组件永远不会同时存在，因此这对您没有用。同样，这里的事件对您不是很有用。您可以在全局总线上发送事件，但是由于其他组件尚不存在，因此它无法监听事件。

在这种情况下，我不确定您想对插件做什么。除非您有充分的理由（例如您使用的Google Analytics（分析）碰巧使用了全局变量，或者您想在开发模式下在Vue中公开某些内容用于调试目的），否则永远不要使用全局变量。在您的情况下，您可能想更改某些全局应用程序状态，这正是Vuex所做的。单击时或在路由器挂钩（例如router.beforeEach）中调用Vuex mutator或action来以结构化的方式保存信息，以便随后可以使用映射的getter检索信息。请记住，您要构建vuex存储，因此不要使用状态变量thingsIWantToShareWithGoodbye，而应将其拆分为previousPage，lastClickOffset和numberOfClicks。

例如：

// store/index.js
import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

const state = {
  button: null
};

const getters = {
  button(state) {
    return state.button;
  }
};

const mutations = {
  setButton(state, payload) {
    state.button = payload;
  }
};

export default new Vuex.Store({
  state,
  getters,
  mutations
});

// Hello.vue
<template>
  <div class="hello">
      <h1>This is Hello</h1>
    <div v-for="(obj, index) in objects" :key="index">
        <router-link @click.native="setButtonState(obj)" class="button" :to="{ path: '/goodbye'}">Share obj[{{ index }}] with Goodbye</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      objects: [0, 1, 2, 3]
    };
  },

  methods: {
    setButtonState (obj) {
      this.$store.commit('setButton', obj)
    }
  }
};
</script>

// Goodbye.vue
<template>
    <div class="goodbye">
      <h1>This is Goodbye</h1>
    <p>Obj = {{ button }}</p>
    <router-link class="button" :to="{ path: '/hello'}">Hello</router-link>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "goodbye",

  computed: {
    ...mapGetters({
      button: 'button'
    })
  }
};
</script>