How to split data in Vuex?

Question

Vue.js

Actually, the question is this - you need to store states in vuex, but I would not want to mix them all together. I’ll make a reservation right away - we won’t use modules (yet). I'm trying to implement this through objects like:

someState:{
  state1:value,
  state2:value,
  ...
  stateN:value
}

and then in the process of working to change these state states through someState.state1 , but for some reason they do not want to change one by one, and you can only change the entire state of someState .
But how to do it so as not to completely overwrite the entire someState object , but only change the state ?

Answer 1

The answer is (see comments above):
Link to sample code: https://codepen.io/kerf/pen/Ngxmem
This assignment will only work once when the component is initialized:

data() { 
  return {
   selected: this.value
  }

To update the selected when the value changes, you can use one of the following methods:
1. tracking the change:

watch: {
    value: function () {
      this.selected = this.value
    }
  }

2. update in the hook:

beforeUpdate() {
    this.selected = this.value
  }

3. pass an object to props, it is passed by reference, so if you change the values ​​in it outside, they should automatically change inside the component (did not check, but logically it should work).