Vue.js 理解Nuxt.js中的状态和Getters:Getters赢了'；行不通

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

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

在我的商店文件夹中，我现在只放置了一个名为“products.js”的文件，在其中我导出如下状态：

export const state = () => ({

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

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

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

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

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

export const getters = () => ({

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

现在，根据文档，在我设置的组件中，如下所示：

export const state = () => ({

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

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

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

或者（不知道用什么）：

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

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

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

两件事。在“存储”文件夹中，可能需要index.js for numxt来设置根模块。这是您也可以在中使用的唯一模块，非常方便

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

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

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

export const state = () => ({

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

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

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

从“vuex”导入{mapGetters}
导出默认值{
计算：{
…地图绘制者({
getName:'产品/getName'
})
}

---

然后您可以在模板中使用getName和

{{getName}

或在脚本中使用

this.getName
为
状态使用工厂函数是一项nuxt.js功能。它在SSR模式下用于为每个客户端创建新状态。但是对于
getter
来说没有意义，因为它们是状态的纯函数。
getter
应该是一个普通对象：

export const getters={
getName：（状态）=>{
返回state.mistica.name
}
}

在这个改变之后，getter应该工作


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

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

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

从“vuex”导入{mapGetters}；
...
计算：{
…映射器（“产品”[
“getName”，
//在这里，您可以从products.js导入其他getter
])
}
导出const state/getters函数的原因或方式是什么？在vuex.vuejs.org上没有看到-这是nuxt东西吗？@birdspider对于state是正确的，但是正如这里的getters导出函数的人所指出的，导出函数是不正确的，因为getter、动作和突变都是对象。nuxt集成了vuex，并且使用模块s和默认名称空间非常感谢。这很有意义，但我甚至没有考虑它，只是复制了语法，而不知道我实际上在做什么。另一个问题：出于什么原因，我可以使用语法$store.state.products.mistica.name访问状态？这是因为存储模块的状态合并到根状态与模块名称相关联的键下的对象。但是，存储模块的getter加了前缀并合并到一个普通数组中。我不确定它为什么会这样工作。非常感谢。使用
this.$store.getters.products.getName
访问getter似乎很麻烦，但上面的语法仍然有效u获取有关存储文件夹中索引文件的额外信息！