Nuxt vuex状态菜单列表：组件中未定义

Posted 2023-02-22

【中文标题】Nuxt vuex状态菜单列表：组件中未定义

【英文标题】：Nuxt vuex state menuList:undefined in component

【发布时间】：2021-05-27 12:23:06

【问题描述】：

伙计。我是新手程序员。

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

所以数据调用在 vue 值为 null 但在开发工具 vue 中有数据。

如何在 nuxt 中使用 getter。

此图像来自开发工具。

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

此图片来自组件

组件 MenuList> 计算的> 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 代码。 茶场/state.js

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

茶昌/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
  

本店/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

【参考方案1】：

试试这个。

  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']
        
      ,

【参考方案2】：

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

从 'vuex' 导入 mapGetters, mapActions

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

..

【讨论】：

嗨，Levy_from_Odessa 它可以工作，但我认为这不适合我解决问题。