从 nuxt.js 中的存储操作获取数据答案

【问题标题】：Getting data from store actions in nuxt.js从 nuxt.js 中的存储操作获取数据
【发布时间】：2018-09-01 12:52:53
【问题描述】：

我正在尝试同时学习 vue.js、nuxt 以及如何使用商店。我正在慢慢了解要做什么，但我认为商店比我预期的要复杂一些。

所以我试图从一个数组中呈现一个“页面”列表。现在它只是代码中的一个对象，但我想稍后用 http 请求替换以从服务器获取类似的数据。

const createStore = () => {
    return new Vuex.Store({
      state: {
        pages: [],
        groups: []
      },
      mutations: {
        getPages(state, data) {
            state.pages = data;
        }
      },
      actions: {
          fetchData({ commit }) {
              commit('getPages', {
                  1: { 'name': 'index' },
                  2: { 'name': 'search' } 
              })
      }
    })
  }

  export default createStore

这个，我觉得不错。但我认为我的问题在于组件代码：

<template>
// pages/index.vue
    <li :for="page in pages">
        {{ page }}
      </li>
</template>
<script>
export default {
 computed: {
   pages() {
     return this.$store.state.pages
   }
 },
 methods: {
   getPages() {
     this.$store.commit('getPages')
   }
 }
}
</script>

这显然是错误的，我得到了错误：

Property or method "page" is not defined on the instance but referenced during render.

我做错了什么？

【问题讨论】：

首先想到的不是:for，而是v-for。第二个与 store 和 getter 有关，但这不是问题，因为您的代码没问题，您应该从 store 中获取数据。第三，由于您使用的是 nuxt - 您只需将文件添加到store/ 目录，因此您不必摆弄new Vuex.Store...
您好，请注意最后一部分，我正在按照文档中的说明进行操作。不是 : 的简写吗？
我有问题，您是否执行了“createStore”？您的商店是否包含在新的 Vue 实例中？我建议你使用 vue-devtools 你可以看到哪里出了问题。

标签： vue.js store nuxt.js

【解决方案1】：

如果我猜对了，您的 this.$store.commit('getPages') 会在没有负载的情况下提交突变，例如 this.$store.commit('getPages', undefined)。您应该调度您的操作而不是提交突变。 this.$store.dispatch('fetchData')。并在 Vuex 中创建 getter：

      getters: {
         getPages(state) {
             return state.pages
         }
      }

希望对您有所帮助。

【讨论】：