首页 文章

Vuejs:使用带有nuxt页面的存储数据

提问于
浏览
0

我正在使用Nuxt作为我的前端服务器,在页面文件夹中有一个索引页面,我想在其中使用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 未定义 .

我不确定我正在尝试做的是这个问题的最佳方法,但重点是当我使用自定义词典而不是数据时,自动完成工作正常 .

1 回答

  • 0

    您可以使用asyncData从商店加载数据(https://nuxtjs.org/guide/async-data

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

相关问题