Проблема Vuejs + Vuex для обработки состояния внутри вычисляемого свойства - PullRequest
Новая
       5

Проблема Vuejs + Vuex для обработки состояния внутри вычисляемого свойства

0 голосов
/ 28 сентября 2018

Я занимаюсь разработкой очень простого веб-приложения с использованием Vuejs, Vuex и Axios.Я блокируюсь, когда пытаюсь обработать значение, возвращаемое геттерами внутри вычисляемого свойства, я получаю эту ошибку в консоли: TypeError: "items is undefined" , в то время как на панели Vue DevTool вычисляетсясвойство имеет правильное значение.

Это мой магазин: 

const store = new Vuex.Store({
state: {
    items: [],
},
actions: {
    LOAD_ITEMS_LIST: function ({ commit }) {
        axios.get('https://example.com/v1/items').then((response) => {
            commit('SET_ITEMS_LIST', { list: response.data })
        }, (err) => {
            console.log(err)
        })
    },
},
mutations: {
    SET_ITEMS_LIST: (state, { list }) => {
        state.items = list
        },
},
getters: {
   items: state => {
        return  state.items;
    }, 
}
})

Это мой корневой компонент 

var vm = new Vue({

el: '#app',
template: `<div>
                <items-list></items-list>
            </div>`,
store,
created () {
    this.$store.dispatch('LOAD_ITEMS_LIST')
},
});

Это мой ItemList Component 

Vue.component('items-list', {

template: ` <ul>
                <li v-for="item of items"> 
                   <h4>{{item.title}}</h4> 
                   <div class="excerpt">{{item.text}}</div>
                </li>
            </ul>
            `,
computed: {
    items() {
        let items = this.$store.getters.items;
        return items.slice(0,10)
       },
     }
   })

Я заметил, что если я возвращаю вычисленные элементы без изменения значения, это хорошо работает , пример: 

items() {
        return this.$store.getters.items;
    }

Где я делаю неправильно?

...