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”时是“ undefined”，在后一种情况下，应用程序坏了，并显示“无法读取未定义的属性'getName'”

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

我在做错什么，或者更好的是，我不了解什么？

Answer 1

事物的结合。在“ store”文件夹中，您可能需要index.js来让nuxt设置根模块。这是您也可以使用Dim ProvisionFile As String 'String File Path of Provision File Dim UpdatedFile As String 'String File Path of Updated OneSource Files Dim ws As Worksheet 'Used to Loop Though WS Tabs in Updated OneSource Files Dim wsName As String 'Name of Tab of OneSource File Dim lastRow As Long Dim lastColumn As Long 'Open Dialog Box that allows you to Select the Provision File MsgBox "Select your provision file, which is the destination for the updated OneSource Reports. Please ensure this file is closed before opening." With Application.FileDialog(msoFileDialogFilePicker) .AllowMultiSelect = False .Title = "Select file" .InitialFileName = "C:\" If .Show = -1 Then 'ok clicked ProvisionFile = .SelectedItems(1) Workbooks.Open(ProvisionFile).Activate 'Worksheets("Control").Activate Else 'cancel clicked End If End With 'Get updated Reports MsgBox "Select the file that contains the updated OneSource Reports." With Application.FileDialog(msoFileDialogFilePicker) .AllowMultiSelect = False .Title = "Select file" .InitialFileName = "C:\" If .Show = -1 Then 'ok clicked UpdatedFile = .SelectedItems(1) Workbooks.Open(UpdatedFile).Activate Else 'cancel clicked End If End With 'Loop through Each tab in Updated File For Each ws In Worksheets wsName = ws.Name lastRow = Sheets(wsName).Cells(Rows.Count, 1).End(xlUp).Row lastColumn = Sheets(wsName).Cells(7, Columns.Count).End(xlToLeft).Column 'Debug.Print ("Yes") Workbooks(ProvisionFile).Worksheets(wsName).Range(Workbooks(ProvisionFile).Worksheets(wsName).Cells(1, 1), Workbooks(ProvisionFile).Worksheets(wsName).Cells(lastRow, lastColumn)) = Sheets(wsName).Range(Sheets(wsName).Cells(1, 1), Sheets(wsName).Cells(lastRow, lastColumn)) Next ws End Sub`的唯一模块，并且非常方便。

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

    clockLayer = CALayer()
    clockLayer!.anchorPoint = CGPoint(x: 0.5, y: 1.0)
    clockLayer!.position = CGPoint(x: 272 * 0.5, y: 272 * 0.5)
    clockLayer!.bounds = CGRect(x: 0, y: 0, width: 1, height: 122)
    var imageLayer = CALayer()
    imageLayer.contents = UIImage(named: "home_clock_dot")?.cgImage
    imageLayer.bounds = CGRect(x: 122, y: 0, width: 10, height: 10)
    clockLayer!.addSublayer(imageLayer) 
    clockImageView.layer.addSublayer(clockLayer!)

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

nuxtServerInit

然后您可以在模板中使用export const getters = { getName: state => { return state.mistica.name } }或在脚本中使用getName <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters({ getName: 'products/getName' }) } </script>。

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

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

import { mapGetters } from "vuex";

...

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

在Nuxt.js中了解状态和Getter：getter无法正常运行

2 个答案: