了解 Nuxt.js 中的 State 和 Getters：Getters 不起作用

Question

我是 Vue 和 Nuxt 的新手，我正在使用这些框架以通用模式构建我的第一个网站。

我对商店在 nuxt 中的工作方式有些困惑，因为按照官方文档，我无法实现我的想法。

在我的商店文件夹中，我现在只放置了一个名为“products.js”的文件，在那里我像这样导出状态：

export const state = () => ({

  mistica: {
    id: 1,
    name: 'mistica'
    }
})

（对象被简化以提供更清晰的解释）

在同一个文件中，我设置了一个简单的 getter，例如：

export const getters = () => ({

    getName: (state) => {
      return state.mistica.name
    }
})

现在，根据文档，在我这样设置的组件中：

computed: {
 getName () {
  return this.$store.getters['products/getName']
 }
}

或者（不知道用什么）：

computed: {
 getName () {
  return this.$store.getters.products.getName
 }
}

但是当在模板中使用“getName”是“未定义”时，在后一种情况下，应用程序损坏并显示“无法读取未定义的属性‘getName’”

请注意，在模板中，我可以使用“$store.state.products.mistica.name”直接访问状态值，没有问题，为什么会这样？

我做错了什么，或者更好的是，我不明白什么？

Answer 1

对 a 使用工厂函数state是 nuxt.js 的一个特性。它在 SSR 模式下用于为每个客户端创建一个新状态。但是因为getters它没有意义，因为这些是国家的纯粹功能。getters应该是一个普通对象：

export const getters = {
  getName: (state) => {
    return state.mistica.name
  }
}

在此更改之后，吸气剂应该可以工作。

然后你可以this.$store.getters['products/getName']在你的组件中使用 。

您不能使用this.$store.getters.products.getName，因为这是不正确的语法。

但是要获得更简单、更干净的代码，您可以使用以下mapGetters帮助程序vuex：

import { mapGetters } from "vuex";

...

computed: {
  ...mapGetters("products", [
    "getName",
    // Here you can import other getters from the products.js
  ])
}

Answer 2

几件事。在您的“商店”文件夹中，您可能需要一个用于 nuxt 的 index.js 来设置根模块。这是您也可以使用的唯一模块nuxtServerInit，并且非常方便。

在您的 products.js 中，您是其中的一部分。您的状态应该作为函数导出，但操作、突变和获取器只是对象。因此，将您的吸气剂更改为：

export const getters = {
    getName: state => {
      return state.mistica.name
    }
}

然后你的第二个计算应该得到吸气剂。我通常更喜欢使用“mapGetters”，您可以在这样的页面/组件中实现它：

<script>
import {  mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      getName: 'products/getName'
    })
}
</script>

然后，您可以在模板中使用 getName{{ getName }}或在脚本中使用this.getName.