quasar [vuex] 未知动作类型：loadUsers

Question

我喜欢让商店运行以获取 api 调用，我尝试了很多示例，最终都以

[vuex] unknown action type: loadUsers

那是我的商店：

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;
    },
  },
});

这就是我的组件来显示接收到的数据

<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>

取自this codepen的工作小提琴

这是因为 Quasar 框架，我错过了一些花哨的特殊东西吗？

谢谢

Answer 1

你能试着像这样打电话给你的dispatch吗：

this.$store.dispatch('loadUsers', null, {root:true})

?