我一直在努力解决 vuex getter 中的 .find()
方法。
我建立了一个商店,其中包含状态列表(页面)
// state.js
const state = {
pages: [{id:1, content:"Page 1"}, {id:2, content:"Page 2"}]
};
还有一个具有 find 方法的 getter,如本文所示: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;
}
}
我期望返回第一个对象,但是在我将 getter(使用 mapGetters)映射到组件中后,它会抛出此错误。
TypeError: "page is undefined"
我还尝试使用 .filter()
方法(返回一个数组)相同的代码,但它确实可以正常工作,没有任何错误。此代码有效:
const getters = {
indexPage: state => {
let indexPage = state.pages.filter(page => page.id === 1);
return indexPage[0];
}
}
最佳答案
尝试:
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>
关于javascript - vuex 中 Array .find() 方法参数未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59462748/