Question

我想知道是否有可能，如何在Created（）函数中使用Vue.js数据。

我将显示一些代码，以便您了解我为什么这么说。

 data (){

        return {
            model: {},
            foo: 'boo'

        }

    },

    created (){

        const getModel = () => {
            const modelId = this.$route.params.id 
            axios.get('/api/model', { params: {modelId: modelId}})
                .then(res => {
                    this.model = res.data
                    this.boo = 'hello'

                    console.log(this.model)
                    console.log(this.foo)
                })
                .catch(err => console.log(err))
        }

        getModel()


        const init =  () =>{        
            console.log(this.model) 
            console.log(this.foo)  
        }

        init()

第一个console.log（foo）返回'hello'。第二个（init）返回“ boo”。

第一个console.log（this.model）也是我期望得到的，但是一旦退出axios方法，整个已挂载的函数就好像又变空了。

我已经尝试了很多方法，但是都没有用，希望我能找到解决方案...预先感谢！

Answer 1

这可能与以下事实有关：在您的created钩子中，您正在使用function关键字创建一个函数，这意味着您的init函数将具有自己的上下文（自己的此）。

解决此问题的方法是使用箭头功能。

    data () { return { foo: 'bar' } }
    created () {
        const init = () => {
            console.log(this.foo);
        }
       init(); // bar
    }

More about arrow functions

更新

实际上，问题源于不等待getModel。因为正在发出请求，所以您首先需要等待promise解析，然后在依赖它的代码中使用其解析的数据。

异步/等待版本为：

async created () {
  const getModel = async () => {
        const modelId = this.$route.params.id 
        try {
            const res = await axios.get('/api/model', { params: {modelId: modelId}})

            this.model = res.data
            this.boo = 'hello'
            console.log(this.model)
            console.log(this.foo)
        }  catch (err) {
            console.error(err)
        } 

    }

   const init =  () =>{        
         console.log(this.model) 
         console.log(this.foo)  
    }

  // An async function always returns a promise
  await getModel();
  init();  
}

Answer 2

一旦JS函数未阻塞，当您调用init时，您的axios调用就不会完成（模型仍然为空）

将init定义为组件方法
在this.init()回调中调用axios.get

无法在Created（）中使用Vue.js数据

2 个答案:

更新