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

Posted 2023-02-22

【中文标题】了解 Nuxt.js 中的状态和吸气剂：吸气剂不起作用

【英文标题】：Understanding State and Getters in Nuxt.js: Getters won't working

【发布时间】：2019-11-26 04:28:11

【问题描述】：

我是 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”直接访问状态值，为什么会这样？

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

【问题讨论】：

export const state / getters 为何或如何发挥作用？还没有在 vuex.vuejs.org 上看到这个 - 这是 nuxt 的东西吗？

@birdspider 的状态是正确的，但正如这里的人指出的那样，导出函数的吸气剂是不正确的，因为吸气剂、动作和突变都是对象。 Nuxt 集成了 vuex，默认使用模块和命名空间

【参考方案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。

【参考方案2】：

对state 使用工厂函数是 nuxt.js 的一项功能。它在 s-s-r 模式中用于为每个客户端创建一个新状态。但是对于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
  ])

【讨论】：

非常感谢。这是有道理的，但我什至没有考虑它，只是复制了语法而不知道我实际上在做什么。

另一个问题：为什么我可以使用语法 $store.state.products.mistica.name 访问状态？

这是因为存储模块的状态被合并到与模块名称关联的键下的根状态对象中。然而，存储模块的 getter 被添加前缀并合并到单个普通数组中。我不太确定为什么会这样。

谢谢一百万。使用 this.$store.getters.products.getName 为我访问 getter 似乎很麻烦，但上述语法有效