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

问题描述

我喜欢让一家商店运行以获取 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 框架，我错过了一些特别的东西？

谢谢

解决方法

您可以尝试像这样调用您的 dispatch 吗：

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

？