了解 Nuxt.js 中的状态和吸气剂：吸气剂不起作用

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

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

在您的 products.js 中，您是其中的一部分。您的状态应该作为函数导出，但动作、突变和吸气剂只是对象。所以把你的吸气剂改成这样：

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

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

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

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

Answer 2

对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，因为这是不正确的语法。

但要获得更简单、更干净的代码，您可以使用来自vuex 的mapGetters 帮助器：

import { mapGetters } from "vuex";

...

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