vuejs:如何引用此.$存储在组件数据属性中

Question

我想在应用程序和模板中使用我的vuex存储数据。

我的Veux商店：

var Vue = require('vue');
var Vuex = require('vuex');
Vue.use(Vuex)
let store = new Vuex.Store({
        state: {
            user: {},
        },
    }
}
module.exports = store

我想在应用中使用商店数据并将其显示在模板中。但是，在data属性中设置数据时，this.$store为undefined。但是，我能够在beforeRender函数中访问它：

var Vue = require('vue'),
store = require('../../link/to/my/store');
module.exports = {
    el: '#selector',
    store,
    components: {},
    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: {}
    }
};

我还尝试了计算的属性，但无济于事。

Answer 1

根据vue文档：

定义组件时，必须将数据声明为返回初始数据对象的函数。

所以，更改：

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

：

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

然后，该功能中的this将引用$store。