Vue.js：在nuxt頁面中使用存儲的數據

Question

我使用Nuxt作為前端服務器，在pages文件夾中有一個索引頁面，我想在其中使用vue-material自動完成程序包。 為此，我有一個插件可以按如下方式導入我的軟件包：

import Vue from 'vue'
Vue.config.productionTip = false

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial)

然后在我的頁面中，我有以下腳本，該腳本從后台獲取數據並將其獲取到商店的狀態：

export default {
  async fetch (context) {
    let { data } = await context.$axios.get('http://127.0.0.1:8000/')
    context.store.commit('my_data', data)
  },

現在在此之下，我必須使用vue-material doc建議的類似方法：

 data: () => this.$store.dispatch('my-data'), <- Doesn't work
  methods: {
    getMyData (searchTerm) {
      this.mydata = new Promise(resolve => {
        window.setTimeout(() => {
          if (!searchTerm) {
            resolve(this.my_data)
          } else {
            const term = searchTerm.toLowerCase()

            resolve(this.my_data.filter(({ name }) => name.toLowerCase().includes(term)))
          }
        }, 500)
      })
    }
  }

如您所見，我要加載以前保存在商店中的日期。 而且沒有這樣的命令this.$store.dispatch有效。 它始終會引發此錯誤， this尚未定義。

我不確定我要做什么是否是解決此問題的最佳方法，但要點是，當我使用自定義詞典而不是數據時，自動完成功能可以正常工作。

Answer 1

您可以使用asyncData從存儲中加載數據（ https://nuxtjs.org/guide/async-data ）

async asyncData(context) { 
  let result = await context.store.dispatch('my-data')
  return {
    data: result
  }
}