Vuex устанавливает состояние объекта по умолчанию как объект в массиве в состоянии

Question

Если у меня в магазине:

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

и я хочу выбрать первый элемент в массиве по умолчанию currentItem:

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

Что нельзя сделать как состояние не определено внутри государства. Я знаю, что состояние должно быть изменено мутацией. Но если бы состояние было логическим, я мог бы установить его, например, в false по умолчанию.

Есть ли способ сделать его похожим на тот, который я пробовал выше?

Answer 1

Вы ищете вычисленное значение.

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]
 })([/*...*/])