如何使Nuxt成为全局对象？

Question

我想创建可以在每个地方全局使用的自定义对象（插件，中间件，组件的创建/计算/安装的方法）

我可以使用上下文属性（自定义插件，自定义路由器中间件...）访问全局对象，

但是如何在组件的created()中访问它？

Answer 1

也可以注入对象。如果您想创建随处可见的插件，则很有用。

此处有关于此combined-inject的文档。

// nuxt.config.js

export default {
  plugins: ['~/plugins/myPlugin.js']
}

// plugins/myPlugin.js

export default ({ app }, inject) {
  inject('myPlugin', { foo: bar})
}

然后您可以通过前缀$访问插件。

// components/MyComponent.vue

<template>
    <div :class="$myplugin.foo">
        {{ $myplugin.foo }}
    </div>
</template>

<script>
export default {
  methods: {
    aMethod() {
      return this.$myPlugin.foo
    }
  }
}
</script>

在vuex和nuxt服务器上下文中也可以使用。
您可以注入对象或函数。

Here，以了解有关客户端/服务器注入的更多信息。

Answer 2

您可以使用store来存储全局变量：

https://nuxtjs.org/guide/vuex-store

---

1 /创建商店：

// your-project/store/index.js

export const state = () => ({
  var1: null,
  var2: null
})

export const mutations = {
  SET_VAR_1 (state, value) {
    console.log('SET_VAR_1', value)
    state.var1 = value
  },
  SET_VAR_2 (state, value) {
    console.log('SET_VAR_2', value)
    state.var2 = value
  }
}

2 /读取数据存储区

然后，您可以从任何var1或var2或<page>.vue或<layout>.vue中获取或设置<plugin>.vue和<middleware>.vue。

从<template>到$store：

// your-project/pages/index.js

<template>
  <section>
    <h2>From Store</h2>
    <div>var1 = {{ $store.state.var1 }}</div>
    <div>var2 = {{ $store.state.var2 }}</div>
  </section>
</template>

或从<script>开始注入asyncData：

// your-project/pages/index.js

<template>
  <section>
    <h2>From Store</h2>
    <div>var1 = {{ var1 }}</div>
    <div>var2 = {{ var2 }}</div>
  </section>
</template>

<script>
export default {
  async asyncData ({ store }) {
    return {
      var1: store.state.var1,
      var2: store.state.var2
    }
  }
}
</script>

3 /更新数据存储区

<script>
export default {
  async asyncData ({ store }) {

    store.commit('SET_VAR_1', 'foo')
    store.commit('SET_VAR_2', 'bar')
  }
}
</script>

4 /组件和存储

您无需从<component>.vue直接获取商店。

因此，您必须使用自定义属性将数据从nuxt文件传递到组件文件：

// your-project/pages/example.js

<template>
  <section>
    <my-component :var1="$store.state.var1" :var2="$store.state.var2" />
  </section>
</template>

然后

// your-project/components/MyComponent.js
<template>
  <section>
    <h2>From props</h2>
    <div>var1 = {{ var1 }}</div>
    <div>var2 = {{ var2 }}</div>
  </section>
</template>

<script>
  export default {
    props: ['var1', 'var2']
  }
</script>