State not reactive on other file

[akbarism]

Maybe I'm using it wrong, but I thought something like this should work:
//store.js

 state: () => ({
    example: ''
  }),

// app.vue

<script setup>
import { mainStore } from "../store/store";
const store = mainStore();
store.message = 'wang wing wung'
</script>

//home.vue

<script setup>
import { mainStore } from "../store/store";
const store = mainStore();
onMounted(() => {
  console.log(store.message) // it's still showing empty string
});
</script>

<template>
<div> {{store.message}} </div> //shows nothing
</template>

Am I misunderstanding something here?

[thiswallz]

that is absolutely expectable, to mutate the state you should have an actions within pinia state, not just modifying message directly, (on top of this, onMounted is not reliable since is passing once the component is mounted, and after this you lose the changes)

try something like:
//store.js

{
 state: () => ({
    rawExample: ''
  }),
  getters: {
    example: (state) => {
        return state.rawExample;
    }
  },
  actions: {
    setMessage(message) {
      this.example = message;
    },
   },
}

app.vue

<script setup>
import { mainStore } from "../store/store";
const store = mainStore();
store.setMessage('wang wing wung')
</script>

and now all should be reactive, for good practices you want to avoid accessing and mutating the state directly, use getters (to access) and actions (to modify/mutate).

[akbarism]

I tried that method and got the error: Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'example'

[posva]

yes, this should work (you don't need an action). You should try putting a demo here, there must be something missing somewhere, e.g. you are only showing the state what about the rest of the file?

[akbarism]

I suspect something,

app.vue is the file where I put

and home.vue is inside
so i tried to make home2.vue
and threw state between home.vue & home2.vue, which are 2 files inside , and state works fine,

does the state changed outside router-view not change inside router-view?

[akbarism]

[SOLVED]

solved guys,
this is because i initialize router above pinia,

then I just turn it over