组件中的 Nuxt vuex 状态 menuList:undefined

Question

伙计。我是新手程序员。

我对 nuxt 使用 vuex 获取数据有疑问 api。

因此vue中的数据调用值为null但在开发工具vue中有数据。

如何在nuxt中使用getter

此图像来自开发工具。

在 getter 和状态变化中：menuList 有数组数据但在组件中没有数据。

这张图片来自组件

组件菜单列表>计算>菜单列表：未定义。

这是我的 menu_list.vue 代码。

computed: {
    menuList () {
      // eslint-disable-next-line no-console
      return this.$store.getters.getMenuList
    }
  },
  beforeCreated () {
    // eslint-disable-next-line no-console
    console.log(this.$store.state)
    this.$store.dispatch('chachang/fetchMenu')
  },
  created () {
    // eslint-disable-next-line no-console
    console.log(this.$store.state)
    this.$store.dispatch('chachang/fetchMenu')
  }

这个vuex代码。 Chachang/state.js

export default () => ({
  menuList: []
})

Chachang/actions.js

export default {
  async fetchMenu ({ commit }) {
    const response = await this.$axios.get('https://hlkittipan.github.io/rock-paper-scissors/menu.json')
    commit('SET_MENU', response.data)
  }
}

Chachang/mutations.js

export default {
  SET_MENU (state, menu) {
    state.menuList = menu
  }
}

Chachang/getters.js

export default {
  getMenuList: (state) => {
    return state.menuList
  }
}

这个store/index.js

import chachangActions from './chachang/actions'
import chachangStates from './chachang/state'
import chachangGetters from './chachang/getters'
import chachangMutations from './chachang/mutations'

export const state = () => ({
  ...chachangStates.state,
})

export const mutations = {
  ...chachangMutations.mutations, 
}

export const actions = {
  ...chachangActions.actions
}

export const getters = {
  ...chachangGetters.getters
}

Answer 1

我会建议你使用从 vuex 导入的 mapActions 和 mapGetters。

从 'vuex'

导入 { mapGetters, mapActions }

export default{
...
   methods:{
      ...mapActions('chachang',[ 'fetchMenu' ])
   },
   mounted(){
      this.fetchMenu() // better to use fetchData instead 
   }
   computed:{
      ...mapGetters('chachang', [ 'menuList' ])
   }

..
}

Answer 2

试试这个。

  async beforeMount () {
        const data = await this.$store.dispatch('chachang/fetchMenu')
        // eslint-disable-next-line no-console
        console.log(data)
      },computed: {
        menuList () {
          // eslint-disable-next-line no-console
          return this.$store.getters['chachang/getMenuList']
        }
      },

组件中的 Nuxt vuex 状态 menuList:undefined

Nuxt vuex state menuList:undefined in component

javascript

vue.js

vuex

nuxt.js