Tidak dapat mendapatkan getter Vuex dsb. berfungsi dengan baik dengan API komposisi <script setup> Vue3

Question

Saya boleh membuatnya berfungsi jika saya menggunakan API komposisi dalam Vue 3 dan menggunakan kaedah tetapan() biasa seperti di bawah:

<script>
  import { useStore } from 'vuex'
  import { computed } from 'vue'

  export default {
    const store = useStore()

    setup () {
      const loginStatus = computed(() => store.getters.loginStatus)

      return { loginStatus }
    }
  }
</script>

loginStatusKini tersedia dalam templat dan sedia untuk digunakan dalam html.

Tetapi apabila saya cuba menggunakan sintaks <script setup> yang lebih baru, const tidak lagi ditangkap dan terdedah kepada templat.

Saya tidak sepatutnya memulangkan apa-apa daripada persediaan skrip, tetapi ia juga tidak berlaku secara automatik. Eslint menandakan script setup中返回任何内容，但它也不会自动发生。Eslint将loginStatus sebagai tidak digunakan. Saya tidak menemui sebarang maklumat tentang cara menggunakan Vuex dalam konteks ini:

<script setup>
  import { useStore } from 'vuex'
  import { computed } from 'vue'
  const store = useStore()

  const loginStatus = computed(() => store.getters.loginStatus)
</script>

Adakah jangkaan ini tidak akan berfungsi? Atau adakah anda tahu pendekatan yang disyorkan?

Sunting 1:

Saya menyedari jawapan ini di mana penyelesaian yang diterima bukanlah sintaks API komposisi yang disyorkan, jawapan kedua melibatkan penulisan kod boilerplate ciptaan saya sendiri yang menjadikan perkara yang saya mahu lakukan mungkin, tetapi nampaknya bukan cara rasmi (jika ada).

Sunting 2:

Seperti yang dinyatakan oleh pengulas, kod saya sebenarnya berfungsi. Walau bagaimanapun, saya tertipu oleh sambungan Vetur yang menandakan pembolehubah sebagai tidak dikembalikan. Jadi dalam templat ia kelihatan seperti kepada saya itulah sebabnya ia tidak ditangkap. Sebenarnya, ralat yang tidak berkaitan adalah punca sebenar.

Disebabkan masalah Vetur ini, saya masih menggunakan sintaks persediaan lama buat masa ini.

Answer 1

Saya telah mencuba

import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const con = computed(() => store.getters.connected);

Dalam kes ini disambungkan hanyalah boolean, tetapi saya juga telah mencuba menggunakan objek dan ia masih berfungsi.

Templat saya:

<template>
  <h1>{{ con }}</h1>
</template>

Ia berfungsi dengan baik.

Answer 2

Penggunaan anda dalam <script setup> sebenarnya sah, tetapi seperti yang dinyatakan dalam ulasan , sambungan Vetur VS Code menunjukkan ralat yang mengelirukan.

Bermula dari versi 0.34.1, Vetur tidak menyokong <script setup>。推荐使用 <script setup>. Sambungan yang disyorkan untuk ialah Volar. Ini juga telah ditweet daripada akaun Twitter rasmi Vue semalam

: 🎜