Question

我正在使用Vuejs，Vuex和Axios开发一个非常简单的Web应用程序。当我尝试处理计算属性内的getter返回的值时，我被阻止了，我在控制台中收到此错误： TypeError：“ items is undefined” ，而在DevTool的Vue面板中，计算出的属性具有正确的值。

这是我的商店：

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')
},
});

这是我的ItemsList组件

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;
    }

我在哪里做错了？

Vuejs + Vuex问题来处理计算属性内的状态

0 个答案: