Navigation component not getting re rendered with stage change in Vue3-CodePudding

When a user updates their username in the EditAccount component, the username is updated in the EditAccount component and in vuex store but not in the Navigation component even though stage change is updated to the new user name.

The problem is that the user is seing thier old user name in Navigation component and a updated user name in the EditAccount component and they don't match.

How can I Re render the Navigation component with the new user name?

Below is the the code for user the data in the Navigation component.

 const user = computed(() => {
      return store.state.user
    })

CodePudding user response：

Try adding set and get property:

const user = computed({
    get: store.state.user,
    set: (val) => store.state.user = val
});

CodePudding user response：

Try using a getter instead acessing the value directly in the state

Getter for user:

export function getUser(state){
 return state.getUser
}

and in the component import the getter like this:

<script>
import {mapGetters} from 'vuex'
export default {
    computed: {
        ...mapGetters('*theStoreName*',['getUser'])
    },
    watch: {
        getUser: function(){
            //Should be possible to see when the getUser changes here
            console.log(this.getUser)
        }
        
    }
}
</script>

Note: You have theStoreName for the store name you're using

Maybe the problem is that the store name is missing, or when you did store.state.user you're acessing the store? If it is it, then you should try to inform the variable you're trying to access, like If it is, like store.state.user.name, with the getter it would be: getUser.name