VueJS 2: manage recursive component with VueX

Viewed 110

I use VueJS 2 to manage data that has children recursively. Exemple of data :

{
  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: [
              ]
            }
          ]
        }
      ]
    }
  ]
}

This data is manage with VueX. I can access to data and display it. I can update/delete data if I update the entire object.

But how to update a specific item with VueX? In my exemple, how to rename the item #7 from "Item 2.1.1" to "Item 2.1.1 updated" without updated the entire object?

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
}

Thanks a lot for your help!

0 Answers
Related