VueJS 2: VueX를 사용하여 재귀 구성 요소 관리

VueJS 2: VueX를 사용하여 재귀 구성 요소 관리

나는 자녀가 있는 데이터를 반복적으로 관리하기 위해 VueJS 2를 사용한다.데이터 예:

{
  id: 1,
  name: 'Root',
  children: [
    {
      id: 2,
      name: 'Item 1',
      children: [
        {
          id: 3,
          name: 'Item 1.1',
          children: [
          ]
        },
        {
          id: 4,
          name: 'Item 1.2',
          children: [
          ]
        }
      ]
    },
    {
      id: 5,
      name: 'Item 2',
      children: [
        {
          id: 6,
          name: 'Item 2.1',
          children: [
            {
              id: 7,
              name: 'Item 2.1.1',
              children: [
              ]
            }
          ]
        }
      ]
    }
  ]
}

이 데이터는 VueX로 관리된다.나는 데이터에 접근하여 그것을 표시할 수 있다.전체 개체를 업데이트하면 데이터를 업데이트/삭제할 수 있다.

하지만 특정 항목을 VueX로 업데이트하는 방법은?예제에서 전체 개체를 업데이트하지 않고 항목 #7의 이름을 "Item 2.1.1"에서 "Item 2.1.1 updated"로 변경하는 방법

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const state = {
    items: {
        id: 1,
        name: 'Root',
        children: [
          // ...
        ]
    }
}
const getters = {
    getItems: state => state.items
}
const mutations = {
    setItems: (state, items) => {
        state.items = items
    },
    setItem: (state, id, item) => {
        // How to do this?
    }
}

export default {
    state,
    getters,
    mutations
}

도와줘서 정말 고마워!

참조URL: https://stackoverflow.com/questions/61969502/vuejs-2-manage-recursive-component-with-vuex