如何与 Nuxt.js 从布局到页面共享变量？

Question

我实际上在一个项目上工作，该项目由使用 Vuetify 在 Nuxt.js 网站上的 Jsons 显示数据组成。我在我的布局中创建了一个选择器来选择用户想要显示的 Json。我需要从我项目的所有不同页面访问这个变量。

这是我的default.vue样子：

<template>
  <v-overflow-btn
    :items="json_list"
    label="Select an Json to display"
    v-model="selected_json"
    editable
    mandatory
    item-value="text"
  ></v-overflow-btn>
</template>

<script>
export default {
  data() {
    return {
      selected_json: undefined,
      json_list: [
        {text: "first.json"},
        {text: "second.json"},
      ],
    }
  }
}
</script>

我想从所有不同页面访问的变量是selected_json.

我在互联网上看到很多东西，例如 Vuex 或包含通过 URL 传递变量的解决方案。但我是网络编程的新手（一周前开始使用 Vue/Nuxt），我真的不明白如何在我的项目中应用它。因此，如果有更简单的方法或很好的解释，我很感兴趣！

在此先感谢您的帮助 ：）

Answer 1

使用 Vuex 我们可以轻松实现您想要的。

首先index.js在文件夹中创建一个文件store（如果您没有store文件夹，则在pages, plugins, layouts etc文件夹所在的同一目录中创建它）。然后把这段代码粘贴进去index.js

//store/index.js
export const state = () => ({
  selected_json: null
})

通过这样做，我们设置了 Vuex。更准确地说，它只是stateVuex 的一部分，如果您不知道我们存储了可在您的项目中访问的数据。
现在我们必须将您的数据分配default.vue给 Vuex。我们可以通过创建一个mutation函数来实现这一点，通过该函数我们可以state在 Vuex 中进行更改。将此添加到您的index.js

//store/index.js
export const mutations = {
  setSelectedJson(state, selectedJson) {
    state.selected_json = selectedJson
  }
}

这里的函数setSelectedJson需要两个参数，state它们是由 Nuxt.js 自动传入的，它包含我们所有的 Vuex 状态数据。selected_json我们自己传入的第二个参数。

现在在你的default.vue我们需要添加一个watcherforselected_json以便我们可以在更新时更新我们的 Vuex selected_json。

//layouts/default.vue
export default {
  watch: {
    selected_json(newValue) {
      this.$store.commit("setSelectedJson", newValue)
    }
  }
}

我们快完成了。
我们需要做的最后一件事是创建一个getter用于从 Vuex 检索值的。像这样的吸气剂会完成它的工作。

//store/index.js
export const getters = {
  getSelectedJson(state) {
    return state.selected_json
  }
}

就是这样。
现在，您selected_json只需使用这行代码从 Vuex 获取它，就可以访问您想要的任何页面。

this.$store.getters["getSelectedJson"]