如何在Vue中的数据功能中使用状态

时间:2020-04-14 11:31:38

标签: vue.js vuex

在Vue的数据功能中使用状态存在问题。 我尝试过

this.items = this.$store.state.search_items

但是它总是导致像这样的空数组

 [__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

任何帮助将不胜感激。谢谢!!

这里是我声明search_items的突变 这是可行的,因为我可以在Vue开发工具中看到state.search_items

SET_WORKSPACES(state, payload) {
        state.workspaces = payload;
        var items = [];
        if (state.workspaces.length) {
            state.workspaces.forEach(function(workspace) {
                // Adding workspaces
                if (workspace.portfolios.length) {
                    items = [...items, ...workspace.portfolios];
                }
                // Adding projects
                if (workspace.projects.length) {
                    items = [...items, ...workspace.projects];
                    // Adding tasks
                    workspace.projects.forEach(function(project) {
                        if (project.tasks.length) {
                            items = [...items, ...project.tasks];
                        }
                    });
                }
            });
        }
        state.search_items = items;
    }

数据属性

data() {
        return {
            results: [],
            keys: ['title','description'],
            list:this.items,
        }
    },

1 个答案:

答案 0 :(得分:0)

如果状态正确更新,则设置状态所花费的时间就是问题所在。这意味着,用于将state分配给data的函数在状态设置之前呈现。

您可以使用返回状态的计算函数

computed:{
  items : function(){
    return this.$store.state.search_items;
  }
}

现在,您可以像使用数据变量一样使用计算后的函数名items