Question

如果我在商店里有货：

 state: {
     items: [],
     currentItem: {}
 }

，我想选择数组中的第一项作为默认currentItem：

 state: {
    items: [],
    currentItem: state.items[0]
 }

由于状态在状态内部是未定义的，因此无法完成。我知道状态必须随着突变而改变。但是，如果状态是布尔值，则可以将其默认设置为false。

有没有办法使它类似于我上面尝试过的方法？

Answer 1

您正在寻找一个computed值。

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    items: ["First Item", "Second Item"],
    index: 0
  },
  computed: {
    currentItem() {
      return this.items[this.index];
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ currentItem }}
</div>

在商店中，您可以使用getter来实现相同的目的。

  getters: {
    currentItem: state => {
      return state.items[state.index];
    }
  }

Answer 2

这是一个常见的JavaScript问题。不可能引用尚未定义的对象的属性。

这需要有一个临时变量，该变量存储对重用对象的引用：

const items = [/*...*/];

...
 state: {
     items,
     currentItem: items[0]
 }

如果上下文不适用于临时变量，可以使用IIFE以不太可读的方式就地完成：

 ...
 state: (items) => ({
     items,
     currentItem: items[0]
 })([/*...*/])

Vuex将状态对象默认设置为状态数组中的对象

2 个答案: