VueJS: как сослаться на this. $ Store в свойстве данных компонента

Я хочу использовать данные моего магазина 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: {}

    }
};

Я также пробовал использовать вычисленное свойство, но безрезультатно.


javascript vue.js vuex vue-component
person johnm    schedule 27.04.2017    source источник
comment
vuex.vuejs.org/en/getters.html   -  person thanksd    schedule 27.04.2017
comment
Извините, я боюсь, что this. $ Store все еще не определен, поэтому я не могу использовать this. $ Store.getters.getterMethod ()   -  person johnm    schedule 27.04.2017
comment
данные должны быть функцией: vuejs.org/2016/02/06/common- ошибки   -  person thanksd    schedule 27.04.2017
comment
Да это правильно !! в документации упоминается только возврат данных как функция в компоненте, но для всех, у кого есть эта проблема, возвращайте данные как функцию для ваших приложений! PS спасибо, добавьте это как ответ, и я дам вам правильный ответ   -  person johnm    schedule 27.04.2017

Ответы (1)


arrow_upward
9
arrow_downward

Согласно документации Vue:

При определении компонента данные должны быть объявлены как функция, возвращающая исходный объект данных.

Итак, меняем:

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

к этому:

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

Тогда this в функции будет иметь ссылку на $store.

person thanksd    schedule 27.04.2017