Question

为什么它不显示来自jsonplaceholder的json？我在这里想念什么吗？这是我第一次使用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
    }
})

这是我的articles.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>

Answer 1

您正在尝试分发突变。您需要使用带有突变的提交或将displayArticles移至动作。我想您打算分发loadArticles？

Answer 2

您必须分派操作，因此必须在.vue文件中编写：

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

并获取组件中的文章列表，您应该在商店中使用getter：

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

计算出的结果将像这样：

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

，然后在HTML中调用计算出的Leement：

    <h1 v-for="article in getArticlesFromStore" :key="article.id">{{article.id}}</h1>

vuex未知操作类型：displayArticles

2 个答案: