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!