时间戳

首页 > 解决方案 > nuxt ：访问存储在 vuex 存储中的全局变量

parameters - nuxt ：访问存储在 vuex 存储中的全局变量

问题描述

在我的 NUXT 应用程序中，我必须为我的所有组件共享一个全局数组。例如，此数组包含星期的标签：

export const state = () => ({
  days: [
      { code: '1', label: 'Lundi' },
      { code: '2', label: 'Mardi' },
      { code: '3', label: 'Mercredi' },
      ...
  ]
})

export const getters = {
  getDayLabel (state, dayCode) {
    return state.days[dayCode]
  },
}

在我的组件中，我必须显示一天的标签。为此，我在组件的模板中编写了：

{{$store.getters['getDayLabel'](dayCode)}}

但是，我有这个错误：

app.js:262 TypeError: _vm.$store.getters.getDayLabel 不是函数

我读过一些主题，getter 函数不应该有参数？有更好的解决方案吗？

埃里克。

标签： parametersvuejs2vuexgetternuxt.js

解决方案

您无需在商店中为 getter 指定新参数

例如，您仅使用索引检索信息的吸气剂：

 export const getters = {
    getDayLabel: state => index => state.days[index]
}

在您的模板中： {{$store.getters['getDayLabel'](1).label }} --> output = Mardi

如果您真的想使用代码搜索，可以使用过滤器功能：

  getDayLabel: state => {
    return dayCode => state.days.filter(c => {
      return c.code === dayCode
    })
  }

在您的模板中： {{$store.getters['getDayLabel'](2)[0].label }} --> output = Mardi

更多信息在这里Github 问题

我不知道这是否是一个好习惯，因为我以前从未这样使用过它，我总是直接在组件中对数据进行过滤。

推荐阅读