vue.js - 了解 Nuxt.js 中的状态和 Getter : Getters won't working

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

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

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

在此更改之后， setter/getter 应该可以工作。

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

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

但是要获得更简单、更干净的代码，您可以使用 mapGetters来自 vuex 的 helper :

import { mapGetters } from "vuex";

...

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