Vuex 问题。this.$store.dispatch(...) 工作

Question

我从 vuex 调度 Actions 时遇到问题，我不知道为什么，但是 ...mapActions 不会触发对 Jsonplaceholder 的请求。但是this.$store.dispatch返回所有 10 个用户没有任何问题，所以这里是两个文件的脚本，home.vue 页面和 store.js：

家：

<script>

  import { mapGetters, mapActions } from "vuex";

  export default {

    name: "Home",

    created() {

      // this.$store.dispatch('fetchUsers')

      console.log(this.$store);

    },

    computed: {

      ...mapGetters(["getUsers"])

    },

    methods: {

      ...mapActions(["fetchUsers"]),

      increment() {

        this.$store.commit("increment");

        console.log(this.$store.state.count);

      }

    }

  };

</script>

店铺：

const store = new Vuex.Store({

  state: {

    count: 0,

    users: []

  },

  getters: {

    getUsers(state) {

      return state.users;

    }

  },

  mutations: {

    increment(state) {

      state.count++;

    },

    setUsers(state, users) {

      console.log(state, users);

      state.users = users;

    }

  },

  actions: {

    fetchUsers({ commit }) {

      return new Promise(resolve => {

        fetch("https://jsonplaceholder.typicode.com/users")

          .then(response => {

            return response.json();

          })

          .then(result => {

            console.log(result);

            commit("setUsers", result);

            return resolve;

          })

          .catch(error => {

            console.log(error.statusText);

          });

      });

    },

    incrementUsers({ commit }) {

      commit("fetchUsers");

    }

  }

});

Answer 1

正如您在此处使用mapGetters的mapActions：import {mapGetters, mapActions} from 'vuex'更简单的方法是：created() {&nbsp; this.fetchUsers()&nbsp; console.log(this.getUsers)},computed: {&nbsp; ...mapGetters(['getUsers'])},methods: {&nbsp; ...mapActions(['fetchUsers']),}此外，以防万一您喜欢使用名称间距