首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从route.params中获取id,在vuex中的数组中查找它,并获取该id的标题字段

在Vue.js中,可以通过route.params来获取URL中的参数。在vuex中的数组中查找该id的标题字段,可以使用Array.prototype.find()方法来实现。

首先,需要在Vue组件中引入vuex,并在computed属性中获取route.params中的id参数。假设路由参数的名称为id,代码如下:

代码语言:txt
复制
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,代码如下:

代码语言:txt
复制
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的标题字段。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券