@
@
@estluced2021-01-05 18:37:56
Vue.js
@estluced, 2021-01-05 18:37:56

How to solve this object reactivity problem in vuex?

Good evening!
Google has already broken its head with this problem, immediately to the code:
There is a component that sends post data to vuex:

<template>
<div v-for="post in content_data" :key="post.id">
        <!-- content_data это очевидно массив с постами -->
        <!-- Просто фиксирую внимание, так как дальше фигурирует данный массив в описании -->
  <button @click="post_edit(post)">
      <p>
      Редактировать
      </p>
  </button>
</div>
</template>

<script>
export default{
  props:['post', 'content'],
  methods:{
        post_edit(i){
        	this.$store.dispatch('full_view', {i:2,d:i})
        }
  }
}
</script>


Further, through the action full_view, I save the data in the state:
export default{
    state:{
        full_view_id: 0,
        full_view_data: false
    },
    getters:{
        full_view_id:(state)=>state.full_view_id,
        full_view_data:(state)=>state.full_view_data
    },
    actions:{
        full_view({state}, d){
            state.full_view_id=d.i
            if(d.d){
                state.full_view_data=d.d
            }else{
                state.full_view_data=false
            }
        }
    }
}


The essence of the problem is that I have a component that edits the post, which, in turn, receives data from the full_view_data getter if it is !== false, then saves it to the component's memory, and after that you can already change the received data.
What does full_view_data look like if it's !== false:
{
    'text':'Hello World!',
    'files':[{'id':0,'filename':'helloworld.jpg'}]
}

So, when all the data in the component is already displayed successfully, you need to update it 'files':[{'id':0,'filename':'helloworld.jpg'}]in 'files':[{'id':0,'filename':'goodbyeworld.jpg'}], well, when the component memory is updated, the content_data array is updated .
The component memory looks like this:
data(){
    return{
      post_data: this.$store.getters.full_view_data
//{
//    'text':'Hello World!',
//    'files':[{'id':0,'filename':'helloworld.jpg'}]
//}
    }
  },


More simply, component1 sends data about the post to vuex memory, and in turn, another component2 takes this data from memory and stores it for further editing, but when editing, the input data of component1 changes.
How to solve this difficult problem? I have already broken my head, I will be very grateful for any answer and suggestion :)
Thank you!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alex, 2021-01-05
_

Not sure. But it seems to need to copy the object

post_data: JSON.parse(JSON.stringify(this.$store.getters.full_view_data))

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question