如何在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中指出的.

Warning：You ‘t具有通过this inside 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"])
   }
}

如果要在加载时执行此操作，请使用mounted (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"])
   }
}