Question

我一直在vuex getter中使用.find()方法。

我建立了一个状态为（页面）列表的商店

// state.js
const state = {
  pages: [{id:1, content:"Page 1"}, {id:2, content:"Page 2"}]
};

还有一个具有 find 方法的吸气剂，如这篇文章：Reference

// getters.js
const getters = {
  indexPage: state => {
    let indexPage = state.pages.find(function(page) { // same error with arrow function
      return page.id === 1;
    });
    return indexPage !== undefined ? indexPage : null;
  }
}

我希望返回第一个对象，但是在将吸气剂（使用 mapGetters ）映射到组件后，它将引发此错误。

TypeError: "page is undefined"

我也使用.filter()方法（返回一个数组）尝试了相同的代码，但是它确实可以正常工作而没有任何错误。这段代码有效：

const getters = {
  indexPage: state => {
    let indexPage = state.pages.filter(page => page.id === 1);
    return indexPage[0];
  }
}

Answer 1

尝试：

const getters = {
  indexPage: state => page => state.pages.find(p => p.id === page)
}

更新：使用mapGetters

const store = new Vuex.Store({
  state: {
    pages: [
      {id:1, content:"Page 1"}, 
      {id:2, content:"Page 2"}
    ]
  },
  getters: {
    indexPage: state => page => state.pages.find(p => p.id === page)
  }
})

const mapGetters = Vuex.mapGetters

new Vue({
  el: '#app',
  store,
  mounted () {
    console.log(this.indexPage(1))
  },
  computed: {
    ...mapGetters([
      'indexPage'
    ])
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>

vuex中未定义的数组.find（）方法参数

1 个答案: