在Vue.js中,可以通过route.params来获取URL中的参数。在vuex中的数组中查找该id的标题字段,可以使用Array.prototype.find()方法来实现。
首先,需要在Vue组件中引入vuex,并在computed属性中获取route.params中的id参数。假设路由参数的名称为id,代码如下:
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['getItemById']),
id() {
return this.$route.params.id;
},
item() {
return this.getItemById(this.id);
},
title() {
return this.item ? this.item.title : '';
}
},
// ...
}
上述代码中,通过mapGetters方法将vuex中的getItemById getter映射到组件中,然后通过computed属性获取id参数,并使用getItemById方法从vuex中的数组中查找该id对应的项。最后,通过item.title获取该id的标题字段。
在vuex的store中,需要定义一个getter方法getItemById来实现通过id查找项的逻辑。假设数组的名称为items,代码如下:
export default {
state: {
items: [
{ id: 1, title: '标题1' },
{ id: 2, title: '标题2' },
// ...
]
},
getters: {
getItemById: (state) => (id) => {
return state.items.find(item => item.id === id);
}
},
// ...
}
上述代码中,getItemById是一个带有参数id的getter方法,通过Array.prototype.find()方法在items数组中查找id匹配的项,并返回该项。
至此,我们可以通过route.params中的id参数,在vuex中的数组中查找该id的标题字段。
领取专属 10元无门槛券
手把手带您无忧上云