Проблема с Vuex. this. $ store.dispatch (...) работает, хотя ... mapAction не работает - PullRequest
Новая
       70

Проблема с Vuex. this. $ store.dispatch (...) работает, хотя ... mapAction не работает

0 голосов
/ 12 июля 2020

У меня проблема с отправкой действий из vuex, я не знаю почему, но ... mapActions не запускает запрос к Jsonplaceholder. Однако this.$store.dispatch возвращает всех 10 пользователей без каких-либо проблем, так что вот скрипты из двух файлов: home. vue page и store. js:

HOME: 

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

1 Ответ

1 голос
/ 12 июля 2020

Поскольку вы используете здесь mapGetters и mapActions: 

import {mapGetters, mapActions} from 'vuex'

, более простой способ сделать это: 

created() {
  this.fetchUsers()
  console.log(this.getUsers)
},
computed: {
  ...mapGetters(['getUsers'])
},
methods: {
  ...mapActions(['fetchUsers']),
}

Кроме того, на всякий случай, если вам нравится чтобы использовать интервал между именами, следуйте этому ответу: { ссылка }

...