Vuejs：在 nuxt 页面中使用存储的数据答案

【问题标题】：Vuejs: Use stored data withing nuxt pagesVuejs：在 nuxt 页面中使用存储的数据
【发布时间】：2018-12-10 11:57:49
【问题描述】：

我使用 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 未定义。

我不确定我正在尝试做的是否是解决此问题的最佳方法，但关键是当我使用自定义字典而不是数据时，自动完成工作正常。

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

您可以使用 asyncData 从存储中加载数据 (https://nuxtjs.org/guide/async-data)

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

【讨论】：