variables - 如何与 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。更准确地说只是 state Vuex 的一部分，如果您不知道我们存储可在您的项目中访问的数据。
现在我们必须从您的 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我们需要添加一个 watcher为 selected_json所以我们可以在 selected_json 时更新我们的 Vuex得到更新。

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

我们快完成了。
我们需要做的最后一件事是制作 getter它用于从 Vuex 检索值。像这样的 setter/getter 会完成它的工作。

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

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

this.$store.getters["getSelectedJson"]