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

实际上，我在一个项目中工作，该项目包含使用Vuetify在Nuxt.js网站上显示JSON的数据。我在布局中创建了一个选择器，用于选择用户想要显示的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>

导出默认值{
数据（）{
返回{
所选内容：未定义，
json_列表：[
{text:“first.json”}，
{text:“second.json”}，
],
}
}
}

我希望从所有不同页面访问的变量是

selected\u json

我在互联网上看到了很多东西，比如Vuex，或者一个通过URL传递变量的解决方案。但我对网络编程有点生疏（一周前开始使用Vue/Nuxt），我真的不知道如何在我的项目中应用它。所以，如果有更简单的方法或者一个好的解释，我很感兴趣

---

提前感谢您的帮助：）

使用Vuex，我们可以轻松实现您的目标

首先，在文件夹

store

中创建一个文件

index.js

（如果没有

store

文件夹，那么在

页面、插件、布局等文件夹所在的同一目录中创建它）。然后将这段代码粘贴到
index.js

//store/index.js
导出常量状态=（）=>({
所选内容：空
})

通过这样做，我们设置了Vuex。更准确地说，只需说明Vuex的一部分，如果您不知道，我们将存储可在整个项目中访问的数据。

现在我们必须将
default.vue
中的数据分配给Vuex。我们可以通过创建一个
mutation
函数来实现这一点，通过该函数我们可以在Vuex中更改
状态。将此添加到您的
index.js

//store/index.js
导出常量突变={
setSelectedJson（状态，selectedJson）{
state.selected_json=selectedJson
}
}

这里的函数
setSelectedJson
包含两个参数，
state
，由Nuxt.js自动传入，它包含所有Vuex状态数据。第二个参数
selected\u json
我们自己传递

现在在您的
default.vue
中，我们需要为
selected_json
添加一个
watcher
，以便在更新
selected_json
时更新我们的Vuex

//layouts/default.vue
导出默认值{
观察：{
选定的_json（newValue）{
此.$store.commit（“setSelectedJson”，newValue）
}
}
}

我们差不多完成了。

我们需要做的最后一件事是制作一个
getter
，用于从Vuex检索值。像这样的能手会胜任的

//store/index.js
导出常量getter={
getSelectedJson（状态）{
返回state.selected_json
}
}

就这样。

现在，您只需使用这行代码从Vuex获取所选的
json
，就可以在任何页面上访问它

this.$store.getters[“getSelectedJson”]
非常感谢您的完整回答！不幸的是，我仍然对Vuex有意见。getter工作正常，但setter根本不工作。我尝试了
newVal
和
newValue
之间的不同组合，但什么也没发生。在watch事件中，Nuxt如何知道将新值作为所选json（newValue）
的参数传递？在setSelectedJson变异函数中，我犯了一个错误，输入了一个变量的名称。两个变量应该有相同的名称，并且都应该工作。我甚至在发布答案之前对它进行了测试。您在控制台中有任何错误吗？此外，观看活动直接来自Vue.js。您可以在官方vue.js文档或此处了解有关观察者的更多信息：好的，谢谢您的更正：）以下是我在控制台中遇到的错误：
属性或方法“selected_json”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或在基于类的组件中是被动的。
My bad，我很容易修复它。现在一切正常。谢谢你的时间！