Vue.js:計算されたメソッドで注入された値にアクセスする方法は?

受付中 プログラミング
2024-12-24
土左衛門
親から孫にデータを渡すために提供/注入メカニズムを使用しましたが、コンポーネントの1つで、テンプレートに送信する前にデータを処理する必要があります。
        export default defineComponent({
          name: 'MrComponent',
          inject: ["mydata"],
          computed: {
            processedData() {
              const mydata = this.mydata;
              return mydata + 1; // Some handling of the data here
            }
          }
        })
        
しかし、次のエラーが発生します。
        [vue-cli-service] TS2339: Property 'mydata' does not exist on type 'CreateComponentPublicInstance<{ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: ((...args: never) => any) | undefined; }, { chartOptions: { responsive: boolean; maintainAspectRatio: boolean; cutout: string; borderWidth: number; }; }, ... 15 more ..., {}>'.
        [vue-cli-service]   Property 'mydata' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: ((...args: never) => any) | undefined; }; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHan...'.
        [vue-cli-service]     41 |   computed: {
        [vue-cli-service]     42 |     chartData() {
        [vue-cli-service]   > 43 |       const mydata = this.mydata;
        [vue-cli-service]        |                           ^^^^^^^^
        [vue-cli-service]     44 |     }
        [vue-cli-service]     45 |   }
        [vue-cli-service]     46 | })
        
mydataテンプレートにアクセスすると、次のように機能します。
        <template>
        {{ mydata }}
        </template>
        
ただし、mydataを表示する前に、他の操作を行う必要があります。それを行う正しい方法は何ですか?
回答一覧
nject小道具はオプション(提出済み)から自動的に検出されるはずなので、これは私にはVueのバグのように見えますvuejs/core#5931が、いくつかの回避策があります. オプション1:偽のプロップタイプdefineComponent コンポーネントにがない場合は、次の最初の型引数で小道具を指定することでprops、小道具を「偽造」できます。mydatadefineComponent()
        export default defineComponent<{ mydata: number }>({
          inject: ['mydata'],
          computed: {
            processedData() {
              // `this.mydata` is number
            }
          }
        })
        
propsただし、この回避策は、オプションを追加するとすぐに型が壊れるため、脆弱です。 オプション2:コンポジションAPIを使用する コードの関連部分をCompositionAPI(つまり、inject()およびcomputed())に切り替えます。
        import { defineComponent, inject, computed } from 'vue'
        
        export default defineComponent({
          setup() {
            const mydata = inject('mydata') as number
            const processedData = computed(() => {
              return mydata + 1
            })
        
            return {
              processedData
            }
          }
        })
        
土左衛門
ありがとう!私のエラーはタイプを宣言しなかったことでしたmydata、私はあなたの例のようにそれを追加しました、そしてそれはうまくいきました、ありがとう!
土左衛門
回避策が役に立ったことをうれしく思います。これはバグであると確信しているので、リンクされているGitHubの問題に注意することをお勧めします。mydataコンポーネントプロップとして自動的に検出されているはずです。
土左衛門
ComponentCustomPropertiesをお探しですか?
        declare module 'vue' {
          interface ComponentCustomProperties  {
            fastdata: {
              user: {
                nome: string,
                tel: string,
                pts: number,
                nivel: number,
                proximo_nivel: number,
                tot_kg: number,
                coleta: Array<any>,
              },
              noticias: Array<any>,
            },
          }
        }
        
土左衛門
ただし、これは型をグローバルに宣言するため、型を挿入しているコンポーネントだけでなく、すべてのコンポーネントがこれらのプロパティを取得します。
土左衛門