如何在asyncData中执行mapGetters？ Nuxt

Question

我的目标是在asyncData内部传递一个getter对象，因为我需要访问状态才能将数据传递给axios

代码示例

export default {
   async asyncData() {
      let result = await $axios.$post('/api/test', { data: this.totalPrice })
   },
   computed: {
      ...mapGetters(["totalPrice"])
   }
}

如您所见，我想访问asyncData中的getter对象，但是我得到了

Answer 1

如documentation ...

所示

  

警告：您不能通过this内部的asyncData访问组件实例，因为在启动之前它被称为 该组件。

请使用提供的context对象

async asyncData ({ store }) {
  const body = { data: store.getters.totalPrice }
  const { data } = await $axios.$post('/api/test', body)
  return data
}

Answer 2

应将方法放入具有vue上下文的方法中：

export default {
   methods : {
      async asyncData() {
         let result = await $axios.$post('/api/test', { data: this.totalPrice })
      }
   },
   computed: {
      ...mapGetters(["totalPrice"])
   }
}

如果要在加载时使用挂载（https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram）

export default {
   async mounted() {
      let result = await $axios.$post('/api/test', { data: this.totalPrice })
   },
   computed: {
      ...mapGetters(["totalPrice"])
   }
}