Vue和简单的商店答案

【问题标题】：Vue and simple storeVue和简单的商店
【发布时间】：2018-08-10 12:33:34
【问题描述】：

我创建了 Vue 应用程序并且我有一个简单的商店：

const paginationStore = {
  data: {
    entitiesDisplayOptions: [
      { value: '1', text: '1' },
      { value: '2', text: '2' },
      { value: '4', text: '4' },
      { value: '999999', text: 'All' },
    ],
    paginationLimits: {
      bottom: 0,
      top: paginationStore.data.entitiesDisplayOptions[0].value
    }
  }
}

我收到错误：

未捕获的类型错误：无法读取未定义的属性“数据”

为什么我不能将 entityDisplayOptions 的值设置为 paginationStore.data.paginationLimits.top？我应该怎么做才能让它工作？

【问题讨论】：

Access object properties within object的可能重复
为什么不用Vuex商店？
为什么要使用 Vuex 商店？
你不能那样做。我的意思是在初始化期间，因此将对象创建为对象文字。你必须使用另一种技术

标签： vue.js

【解决方案1】：

您可以将其存储在定义之外的变量中：

const newEntitiesDisplayOptions = [
      { value: '1', text: '1' },
      { value: '2', text: '2' },
      { value: '4', text: '4' },
      { value: '999999', text: 'All' },
];

const paginationStore = {
  data: {
    entitiesDisplayOptions: newEntitiesDisplayOptions ,
    paginationLimits: {
      bottom: 0,
      top: newEntitiesDisplayOptions[0].value
    }
  }
}

【讨论】：

【解决方案2】：

有很多可能性。您所要做的就是记住，在以对象字面量的形式创建对象时，您不能引用其他对象属性。

const entitiesDisplayOptions = [
  { value: '1', text: '1' },
  { value: '2', text: '2' },
  { value: '4', text: '4' },
  { value: '999999', text: 'All' },
]

const paginationLimits = {
  bottom: 0,
  top: paginationStore.data.entitiesDisplayOptions[0].value
}

const paginationStore = {
  data: {
    entitiesDisplayOptions,
    paginationLimits
  }
}

【讨论】：