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

猴子2020-04-03

我实际上是在使用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），我真的不太了解如何在我的项目中应用它。因此，如果有更简单的方法或一个很好的解释，我很感兴趣！

在此先感谢您的帮助：）

西门2020/04/03 10:55:04

使用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我们需要添加watcherfor，selected_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"]

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer