VUE 3 JS：无法访问我安装的道具

Question

我的组件有问题。

我从这个组件的父文件中收到一个 id（名称：theIdPost），但是当我想在 mounted(){} 部分使用它时，它告诉我：

TS2339: Property 'theIdPost' does not exist on type '{...

我可以在模板中打印 id，不用担心，但在 SCRIPT 部分使用它不起作用。

组件文件：

<template lang="fr">

// All my html 

</template>
<script lang="ts">
import { computed } from 'vue';
import { store } from '../store/index';


export default{
  name: 'comment',
  props: {
    theIdPost: Number,
    theTxtPost: String, 
    theLike: Number,
  },
  setup() {
    const myStore: any = store

    const commentList = computed(() => myStore.state.commentList);
    console.log("CommentList > " +commentList.value);
    return { commentList };
  },
  mounted() {
    const myStore: any = store;
    myStore.dispatch("getComments", 
    {'id': this.theIdPost}
    );
  }

}


</script>
<style lang="scss">
@import "../scss/variables.scss";
// ..... the style part

</style>

你能解释一下为什么它不起作用吗？

谢谢

Answer 1

如果您将组合 API 与 setup 一起使用，则必须以不同方式添加生命周期挂钩： https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

setup(props) {
    const myStore: any = store

    const commentList = computed(() => myStore.state.commentList);
    console.log("CommentList > " +commentList.value);
    
    onMounted(() => {
        myStore.dispatch("getComments", 
            {'id': props.theIdPost}
        );
    })
    
    return { commentList };
  },

Answer 2

解决方案有 2 分：

因为我使用的是vue 3，并且在composition中设置API，所以生命周期Hook不同，mounted => onMounted

setup(props) {
  const myStore: any = store
  const commentList = computed(() => myStore.state.commentList);
   
  onMounted(() => {
    myStore.dispatch("getComments", 
      {'id': props.theIdPost}
    );
  })
   
  return { commentList };
},

当我们使用 onMounted 时，就像我们使用 ref() 时一样，我们必须先导入。所以在SCRIPT部分的开头，我们要写：

import { onMounted } from 'vue';

所以我的最终脚本是：

<script lang="ts">
import { computed, onMounted } from 'vue';
import { store } from '../store/index';


export default {
  name: 'comment',
  props: {
    theIdPost: Number,
    theTxtPost: String,
    theLike: Number,
  },
  setup(props) {
    const myStore: any = store;
    const commentList = computed(() => myStore.state.commentList);

    onMounted(() => {
      myStore.dispatch("getComments",
        { 'id': props.theIdPost }
      );
    })
    return { commentList };
  },
}

</script>

感谢 Thomas 开头的回答:)

Answer 3

它对我也有用。我正在设置设置而不是将道具传递给设置。现在好了

VUE 3 JS：无法访问我安装的道具

VUE 3 JS : can't acces to my props in mounted

vuex

vue-props

vuejs3