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

Question

如果我的商店里有:

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

我想选择数组中的第一个项目作为默认 currentItem:

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

这是无法完成的，因为状态内部未定义。 我知道必须通过突变来改变状态。但如果状态是 bool 值，我可以将其设置为默认值 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];
    }
  }