Unable to make Vuex getters etc. work with <script setup> Vue3 composition API

Question

I get this working in the Vue 3 with the composition API if I use the regular setup() method like so:

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

  export default {
    const store = useStore()

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

      return { loginStatus }
    }
  }
</script>

loginStatus is now exposed to the template and can be used in the html.

But when I try the newer <script setup> syntax the const isn't picked up and exposed to the template anymore.

I'm not supposed to return anything from script setup, but it doesn't happen automatically either. Eslint marks loginStatus as unused. I can't find any information about how Vuex is supposed to be used in this context:

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

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

Is this expected not to work? Or do you know the recommended way of doing it?

EDIT 1:

I'm aware of this answer where the accepted solution isn't recommended composition API syntax and the second answer involves writing self-created boilerplate which makes what I want to do possible, but doesn't seem like the official way (if there is one).

EDIT 2:

As pointed out by commenters, my code actually did work. I was however fooled by the Vetur extension marking those unreturned variables as unused. So it looked to me like this was the reason it wasn't picked up in the template. In reality an unrelated error was the real reason.

Because of this Vetur issue I'll stick with the older setup syntax for now.

Your <script setup> should work. If it doesn't work for you, please share a reproduction of the problem. — tony19
– tony19, Commented Aug 22, 2021 at 1:27
You are right, it actually does work. But Vetur fooled me, it shows unreturned variables as unused, so it looked to me that was the reason it wasn't picked up in the template. But it was an unrelated error that was the real reason. Because of this Vetur problem I'll stick with the older setup syntax for now. — anatolhiman
– anatolhiman, Commented Aug 22, 2021 at 3:41
Try to use the vuedx extension marketplace.visualstudio.com/… — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 22, 2021 at 7:18

h0p3zZ · Accepted Answer · 2021-08-22 01:45:36Z

3

I kept trying and

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

const store = useStore();

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

In this case connected is just a boolean but I also tried it with objects and it still works.

My template:

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

And it works just fine.

answered Aug 22, 2021 at 1:45

h0p3zZ

7374 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anatolhiman Over a year ago

You are right, my code actually did work. But Vetur fooled me, it shows those unreturned variables as unused, so it looked to me like that was the reason it wasn't picked up in the template. But it was an unrelated error that was the real reason. Because of this Vetur problem I'll stick with the older setup syntax for now. Thanks for investigating!

tony19 · Accepted Answer · 2021-08-22 14:09:12Z

2

Your usage in <script setup> actually works, but as pointed out in comments, the Vetur VS Code extension was showing misleading errors.

As of 0.34.1, Vetur does not support <script setup>. The recommended extension for <script setup> is Volar. This was even tweeted yesterday from Vue's official Twitter account:

answered Aug 22, 2021 at 14:09

tony19

140k23 gold badges281 silver badges354 bronze badges

Comments

js coolso · Accepted Answer · 2024-10-24 00:43:00Z

0

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

const store = useStore();

const con = computed(() => store.getters['moduleName/connected'];

edited Oct 24, 2024 at 0:43

answered Oct 24, 2024 at 0:38

js coolso

11 bronze badge

1 Comment

Jeremy Caney Over a year ago

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Collectives™ on Stack Overflow

Unable to make Vuex getters etc. work with <script setup> Vue3 composition API

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related