vuex неизвестный тип действия: displayArticles - PullRequest
Новая
       24

vuex неизвестный тип действия: displayArticles

0 голосов
/ 16 октября 2019

Почему не отображается json, полученный от jsonplaceholder ? Я что-то здесь упустил? Это только мой первый раз, когда я использую Vuex.

Кстати, я разделил файлы, чтобы я мог легко их отладить, и я подумал, что это хорошая практика для меня, потому что я планирую внедрить vuex в более крупномпроект. Вот мой index.js: 

import Vue from 'vue';
import Vuex from 'vuex';
import articles from './modules/articles';

//Load Vuex
Vue.use(Vuex);

//Create store
export default new Vuex.Store({
    modules: {
        articles
    }
})

Вот мой article.js. 

 import axios from 'axios';

//state
const state = {
    articles: []
};

//actions
const actions = {
    loadArticles({ commit }) {
        axios.get('https://jsonplaceholder.typicode.com/todos')
            .then(response => response.data)
            .then(articles => {
                commit('displayArticles', articles,
                console.log(articles))
            })
    }
};

//mutations
const mutations = {
    displayArticles(state, articles) {
        state.articles = articles;
    }
};

//export 
export default {
    state,
    getters,
    actions,
    mutations
};

и, наконец, мой home.vue, который будет отображать данные из vuex: 

  <template>
  <section>
    <h1>HI</h1>
    <h1 v-for="article in articles" :key="article.id">{{article.id}}</h1>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  mounted() {
    this.$store.dispatch("displayArticles");
  },
  computed: mapState(["articles"])
};
</script>

Ответы [ 2 ]

0 голосов
/ 16 октября 2019

вам нужно отправить действие, поэтому в вашем файле .vue вы должны написать: 

mounted() {
      this.$store.dispatch("loadArticles");
    },

и чтобы получить список статей в вашем компоненте, вы должны использовать getter в вашем Магазине: 

const getters = {
  getArticles: state => {
    return state.articles;
  }

, и вычисленное будет выглядеть следующим образом: 

    computed:{
      getArticlesFromStore(){
        return this.$store.getters.getArticles;
      }
    }

, и затем вы вызываете вычисленный элемент управления в своем HTML: 

    <h1 v-for="article in getArticlesFromStore" :key="article.id">{{article.id}}</h1>
0 голосов
/ 16 октября 2019

Вы пытаетесь отправить мутацию. Вам нужно использовать коммит с мутациями или перемещать ваши displayArticles к действиям. Я полагаю, вы хотели отправить loadArticles?

...