Any way to assign reactive store value to reactive state?

Question

I have a reactive store store.js:

import {reactive} from "vue";

const re = reactive({})

export default {
    re
}

which I'm using inside a component to assign a text value:

store.re.blog = 'Hello World!'

How can I assign this value to state inside another component? I've tried:

const state = reactive({
    content1: store.re.blog || '',
    content2: store.re.blog ? store.re.blog : ''
})

both of which don't work. I want to put the value in state because in the next step I'm sending the state object via ajax request to the database.

I'm using vue 3 with script setup

Answer 1

It works for me:

App.vue:

<template>
  <HelloWorld />
  <OtherComponentReceivingStoreValue />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import OtherComponentReceivingStoreValue from "@/components/OtherComponentReceivingStoreValue.vue";

export default defineComponent({
  name: 'App',
  components: {
    OtherComponentReceivingStoreValue,
    HelloWorld
  }
});
</script>

HelloWorld.vue:

<template>
  Component that initialize the store blog value
</template>

<script lang="ts" setup>
import store from '@/store'

store.re.blog = 'Hello World!'
</script>

ComponentReadingTheStore:

<template>
  <div>
    store value:
    {{ state }}
  </div>
</template>

<script lang="ts" setup>
import store from '@/store'
import {reactive} from "vue";

const state = reactive({
  content1: store.re.blog || '',
  content2: store.re.blog ? store.re.blog : ''
})
</script>

If what you want is to change the store in the receiver component when the first component mutate the store, you have to put a watch or make a computed.