javascript - VueJS: how to reference this.$store in component data property - Stack Overflow

admin管理员组

文章数量:1341736

I am wanting to use my Vuex store data in my app and template.

My Veux store:

var Vue = require('vue');
var Vuex = require('vuex');

Vue.use(Vuex)

let store = new Vuex.Store({
        state: {
            user: {},
        },
    }
}
module.exports = store

I want to use the store data in my app and display it in the template. But, when setting the data in the data property, this.$store is undefined. I am, however, able to access it in the beforeRender function:

var Vue = require('vue'),
store = require('../../link/to/my/store');

module.exports = {
    el: '#selector',

    store,

    ponents: {},

    data: {
        saving: false,
        user: this.$store.state.user // this.state is not available here
    },

    created: function(){},
    beforeCreate: function() {

        console.log(this.$state.state) // this.$state is available here

        // i get my data in the form of a json string from the dom
        // and update the global store with the data
        let user = document.querySelector('#user-data')
        if (user) this.$store.dispatch('updateUser', JSON.parse(user.innerHTML))

    },

    methods: {}

    }
};

I have also tried with a puted property but to no avail.

I am wanting to use my Vuex store data in my app and template.

My Veux store:

var Vue = require('vue');
var Vuex = require('vuex');

Vue.use(Vuex)

let store = new Vuex.Store({
        state: {
            user: {},
        },
    }
}
module.exports = store

I want to use the store data in my app and display it in the template. But, when setting the data in the data property, this.$store is undefined. I am, however, able to access it in the beforeRender function:

var Vue = require('vue'),
store = require('../../link/to/my/store');

module.exports = {
    el: '#selector',

    store,

    ponents: {},

    data: {
        saving: false,
        user: this.$store.state.user // this.state is not available here
    },

    created: function(){},
    beforeCreate: function() {

        console.log(this.$state.state) // this.$state is available here

        // i get my data in the form of a json string from the dom
        // and update the global store with the data
        let user = document.querySelector('#user-data')
        if (user) this.$store.dispatch('updateUser', JSON.parse(user.innerHTML))

    },

    methods: {}

    }
};

I have also tried with a puted property but to no avail.

• javascript
• vue.js
• vue-ponent
• vuex

Share Follow edited Apr 27, 2017 at 16:11 thanksd 55.7k2323 gold badges165165 silver badges154154 bronze badges asked Apr 27, 2017 at 15:20 johnmjohnm 12111 gold badge11 silver badge33 bronze badges 4

• vuex.vuejs/en/getters.html – thanksd Commented Apr 27, 2017 at 15:20
• Sorry i am afraid that this.$store is still not defined so i am unable to use this.$store.getters.getterMethod() – johnm Commented Apr 27, 2017 at 15:36
• 2 data needs to be a function: vuejs/2016/02/06/mon-gotchas – thanksd Commented Apr 27, 2017 at 15:53
• Yep thats correct!! in the documentation it only mentions returning data as a function in a ponent but for anyone else who has this issue, return data as a function for your apps as well! PS thanksd add this as an answer and i will give you correct answer – johnm Commented Apr 27, 2017 at 16:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

As per the Vue documentation:

When defining a ponent, data must be declared as a function that returns the initial data object.

So, change:

data: {
    saving: false,
    user: this.$store.state.user
},

to this:

data: function () {
  return {
    saving: false,
    user: this.$store.state.user
  };
}

Then the this in the function will have a reference to $store.

本文标签： javascriptVueJS how to reference thisstore in component data propertyStack Overflow