The proper way to manage deep state with pinia?

[GoodManWEN]

Hi everyone, I am using pinia to complete a small project written by vue3. When I needed to manage a complex structure, I found that I could not access them directly in the method, for example,

export const mainStore = defineStore('main', {
  state: () => {
    return {
      fileStruct: {
        '/usr/etc':  {
          store: [
            {name: 'a.json', size: 60, permission:755},
            {name: 'b.txt', size: 53, permission:755},
          ],
          reverseIndex: {
            'a.json': 0, 'b.txt': 1
          }
        },
        '/usr/local':  {
          store: [
            {name: 'c.json', size: 100, permission:755},
            {name: 'd.txt', size: 120, permission:777},
          ],
          reverseIndex: {
            'c.json': 0, 'd.txt': 1
          }
        }
      }
    }  
  },
  actions: {
    updateFilePermission(dirName: String, fileName: String, perm: number) {
      let file_idx = this.fileStruct[dirName].reverseIndex[fileName];
      this.fileStruct[dirName].store[file_idx].permission = perm;
    }
  }
})

The above is a minimal implementation, which uses a sophisticated state. The problem I'm having is that the above code can access this.fileStruct[dirName] but will throw a Uncaught TypeError: Cannot read properties of undefined (reading 'store') error when it comes to this.fileStruct[dirName].store. I noticed that pinia's state is a proxy but not a normal object, how do I use actions to properly modify these deep statuses? Any help will be greatly appreciated!

[posva]

You don't need to do anything specific. The object being a proxy is just how Vue tracks its reactivity. You probably need to check if dirName exists: if (dirName in this.fileStruct)

[GoodManWEN]

Thanks for reply, in my case, I can use console.log(this.fileStruct[dirName]) get a Proxy type output, but at the same time it will throw error if I run console.log(this.fileStruct[dirName].store), this makes me think it can't listen to deep data.