fetch - 如何在nuxt的fetch函数中分派(dispatch)存储操作？

Question

我有一个使用 nuxt Universe SSR 的项目。我使用 fetch 方法获取布局上的数据以触发存储操作调度。但它根本不起作用......
这是代码。这是默认布局文件:

import Navbar from '~/components/Navbar'

export default {
  components: {
    Navbar
  },
  async fetch ({ store }) {
    await store.dispatch('fetchItems')
  }
}

这是 vuex 商店:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({

  state: {
    allItems: [],
    currentCategories: []
  },
  mutations: {
    setItems (state, allItems) {
      state.allItems = allItems
    },
    setCurrentCategories (state, currentCategories) {
      state.currentCategories = currentCategories
    }
  },
  actions: {
    async fetchItems ({ commit, dispatch }) {
      try {
        const { data: { items } } = await this.$axios.get('/api/catalog/categories?limit=0')
        commit('setItems', items)
        dispatch('getCurrentCategories')
      } catch (e) {
        console.error(e)
      }
    },
    getCurrentCategories ({ commit }, payload) {
      const newCategories = []
      if (!payload) {
        this.state.allItems.forEach((item) => {
          if (!item.parent_id) {
            newCategories.push(item)
          }
        })
      } else {
        this.state.allItems.forEach((item) => {
          if (item.parent_id === payload) {
            newCategories.push(item)
          }
        })
      }
      commit('setCurrentCategories', newCategories)
    }
  },
  getters: {
    allItems: s => s.allItems,
    currentCategories: s => s.currentCategories
  }
})

export default store

似乎 fetch 方法根本不会触发。我试图在 fetch 方法中的 console.log 中放入一些东西，但我在控制台中看不到任何输出......我是 nuxt 的新手，我之前使用过 vue。任何建议都非常感谢。

Answer 1

改为这样做:

async fetch () {
    await this.$store.dispatch('fetchItems')
  }