The state variable in the store mentioned in vuex can only be displayed to submit changes through commit? Why is it normal for me to assign values directly?

official documentation: you cannot directly change the state in store. The only way to change the state in store is to commit the mutation explicitly. But why can I modify the value in state directly?
store:

state={  
     testArr:[
     {"test":1},
     {"test":2}
     ],
     testNum:0
   // testNum
   };

I have a place in div in component A that renders
data through {{this.$store.state.testNum}}, and then in component B"s script,
directly through the assignment statement without warning or error, and the data in component An also changes console to see the corresponding change in this.$store.
does not modify the value of state
this.$store.state.testNum=10 through a mutation method of this.$store.commit.
this.$store.state.testArr [0] .test = 10

console.log (this.$store.state); / /

what does this mean? Or is there a problem with my understanding? Thank you in advance! ~

Jun.14,2022

of course, you can change the value in state with this.$store.state, because this is where the vuex stores the value, but it is generally not done, because it is uncontrollable for the data. Generally, an error warning will be generated in the development environment. As follows

clipboard.png
vuexvuewatch

clipboard.png
state

clipboard.png

mutation


:
image.png

:
scriptthis.$store.state.testArr[0].test=999;999

image.png

  https://blog.csdn.net/qq_37024887/article/details/104972020

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5645d-45394.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5645d-45394.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?