Unable to make Vuex getters etc. work with – tony19 Aug 22 '21 at 01:27

Question

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.

score 3 · Answer 1 · answered Aug 22 '21 at 01:45

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 '21 at 01:45

h0p3zZ

690
3
16

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! – anatolhiman Aug 22 '21 at 03:43

score 1 · Accepted Answer · answered Aug 22 '21 at 14:09

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:

2 Answers2