quasar [vuex] unknown action type: loadUsers - vue.js

Question

I like to get a store running to get a api call, Ive tryed a lot of examples end all ends up with
[vuex] unknown action type: loadUsers
thats my store:
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
axios.defaults.baseURL = "https://jsonplaceholder.typicode.com/";
export default new Vuex.Store({
state: {
users: [],
},
actions: {
loadUsers({ commit }) {
Vue.axios.get("users").then((result) => {
commit("SAVE_USERS", result.data);
}).catch((error) => {
throw new Error(`API ${error}`);
});
},
},
mutations: {
SAVE_USERS(state, users) {
state.users = users;
},
},
});
and thats my component to display the received data
<template>
<div class="hello">
<table class="users">
<tr>
<th>Name</th>
<th>Username</th>
<th>Email</th>
</tr>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "storenews",
computed: mapState(["users"]),
created() {
this.$store.dispatch("loadUsers");
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
width: 100%;
}
</style>
taken from a working fiddle from this codepen
Is this because of the Quasar Framework that I miss some fancy special stuff?
Thank you

Answer 1

Can you try to call your dispatch like this:
this.$store.dispatch('loadUsers', null, {root:true})
?