繁体   English   中英

Vue.js:在nuxt页面中使用存储的数据

[英]Vuejs: Use stored data withing nuxt pages

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

我不确定我要做什么是否是解决此问题的最佳方法,但要点是,当我使用自定义词典而不是数据时,自动完成功能可以正常工作。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM