表,计算属性和veux数据

时间:2017-07-27 18:22:00

标签: vuejs2 vuex computed-properties

我需要有关计算属性的帮助..这很难解释,但我会尝试..

我创建了一个包含过滤器和分页的表。

当我直接从API请求的请求传递数据时, 但是当我不得不处理来自vuex的数据时,我遇到了麻烦......

因为我不知道什么时候会在vuex中填写数据

然后我使用computed属性,因为当vuex被填充时它将捕获数据..

然而,由于填充数据的功能与我点击页面时执行的功能相同,因此我会使进程崩溃并且页面停止工作。

以下是计算属性:

list(){

                if (this.url_get == '' && this.$store.state.table.list.length > 0){         
                    this.total_data = this.$store.state.table.list.length
                    this.repos = this.$store.state.table.list   
                    this.getPaginatedItems(1)               
                }

                var filter = this.configs.filter.toString().toLowerCase()

                var items = ''

                if (filter == ''){
                    items = this.dados
                }else{
                    items = this.repos
                }

                const list = this.$lodash.orderBy(items, this.configs.orderBy, this.configs.order)

                this.reverse = 1;

                if (this.$lodash.isEmpty(filter)) {
                    return list;
                }

                var result = this.$lodash.filter(list, repo => {
                    return repo[this.filter_term].toString().toLowerCase().indexOf(filter) >= 0
                })

                return result

            },

功能:

getPaginatedItems(data) {

                var items = this.repos

                var page = data

                var per_page = 10
                var offset = (page - 1) * per_page
                var max_item = offset+per_page
                var paginatedItems = this.$lodash.slice(items, offset, max_item)

                var obj = {
                    offset: offset,
                    current_page: page,
                    per_page: per_page,
                    total: items.length,
                    total_pages: Math.ceil(items.length / per_page),
                    data: paginatedItems,
                    last: offset+paginatedItems.length,
                    max_item: max_item
                }

                this.pagination = obj

                this.dados = this.pagination.data
            },

请求谁填写vuex中的数据

axios
                    .get(`api/getusuariosgrupo/${id}`)
                    .then(res => {

                        if (res.data.dados !== undefined && res.data.dados.length !== 0){

                            vmThis.isEditing = true

                            var d = {
                                list: res.data.dados,
                                length: res.data.dados.length
                            }

                            this.$store.commit('SET_TABLE', d)

                        }else{
                            vmThis.isEditing = false
                        }

                        vmThis.$bus.$emit('processando',{val: false})
                    })

0 个答案:

没有答案