Vue.js 如何从vue中的计算属性数组字段创建数组？

我有一个计算属性，可以从vuex存储中提取一些数据，如下所示：

computed:{…mapGetters（[“allCategories”]）}，

中的每个
类别
。所有类别

看起来都是这样的：

{
    "content": [
        {
            "id": "efb038df-4bc9-4e31-a37a-e805c9d7294e",
            "parentCategoryId": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
            "name": "Foo"
        },
        {
            "id": "5905d437-db2e-4f91-8172-c515577b86e9",
            "parentCategoryId": "5905d437-db2e-4f91-8172-c515577b86e9",
            "name": "Bar"
        },
        {
            "id": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
            "parentCategoryId": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
            "name": "Baz"
        }
    ],
    "number": 0,
    "size": 100,
    "total": 3
}

{“id”：“123”，“name”：“Foo”}

我想从

中拉出每个
名称
字段。在装入组件之前，将所有类别

放入名为

categoryNames

的被动数据属性中

我怎样才能做到这一点

到目前为止，我已经尝试了以下内容：

beforeMount() {
    for (let i = 0; i < this.allCategories.content.length; i++) {
      var name = this.allCategories.content[i].name
      this.categoryNames.push(name);
    }
},

this.allCategories

看起来是这样的：

{
    "content": [
        {
            "id": "efb038df-4bc9-4e31-a37a-e805c9d7294e",
            "parentCategoryId": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
            "name": "Foo"
        },
        {
            "id": "5905d437-db2e-4f91-8172-c515577b86e9",
            "parentCategoryId": "5905d437-db2e-4f91-8172-c515577b86e9",
            "name": "Bar"
        },
        {
            "id": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
            "parentCategoryId": "8ffc214f-fff1-4433-aac9-34d13b4e06c5",
            "name": "Baz"
        }
    ],
    "number": 0,
    "size": 100,
    "total": 3
}

---

您可以使用创建的钩子调用vuex操作，该操作调用捕获状态的vuex变体，进行解析并将解析后的数据存储在状态的新数组中，然后使用getter从状态获取解析后的数组

created() {
    this.$store.dispatch('someAction');
},
computed: {
    ...mapGetters({
        parsedArray: 'getParsedArray',
    })
}

export const actions = {
    someAction({ commit }) {
        commit('SOME_MUTATION');
    },
}

export const mutations = {

  SOME_MUTATION(state) {
    let data = state.originalData;
     let parsedArray = [];

    // Do parsing work here

    state.parsedArray = parsedArray
  },

}

export const getters = {
  getParsedArray: state => {
    return state.parsedArray;
  },
}