Vue Router and Vuex Reactivity

Vue Router and Vuex Reactivity

Hey Everyone - Would apperciate you help to resolve something I don’t understand the cause of with Vuex and Vue Router and how reactivity works between different components that both bind to the save vuex state. I’m updating the state in one component and expecting that when I navigate to the other component the state change will show there, however the other component is not updating.

I have an app which uses a vuex store (with modules) to maintain a user object, initialised with empty values and a mutation I call to whenever I would like to update it.

// my store module. this module is named user and contains an object also named user
 state: {
    user: {
      first_name: '',
      last_name: '',
   }
  mutations: {
    updateUser(state, payload) {
      Object.assign(state.user, payload);
    },
  },
  actions: {
    fetchUser: context => axios
      .get('/api/user',)
      .then((response) => {
        context.commit('updateUser', response.data);
        return Promise.resolve(response.data);
      })
      .catch(error => Promise.reject(error)),
  }
}

the app has various components and I use vue-router to navigate between them. Two routes I have are;

  1. Settings page - where the user can update their first_name and last_name.
  2. A dashboard page which includes an subcomponent to display the user’s first_name and last_name. The user data is held in a database, I intially fetch the user data in the dashboard created hook by calling the fetchuser action in the vuex store.
// my routes
const routes = [
  {
    path: '/',
    component: DashboardPg,
  },
  {
    path: '/settings',
    component:SettingsPg,
  },
]

The dashboard page uses a computed property to bind to the values

// my dashboard page
<template>
  <a-user-dash-card
    :first-name="user.first_name"
    :last-name="user.last_name"
  />
</template>
<script>
import { mapState } from 'vuex';
import AUserDashCard from './AUserDashCard.vue';

export default {
  components: {
    AUserDashCard,
  },
computed: {
 ...mapState('user', {
      user: state => state.user,
    }),
}

when i run the app the dashboard page correct shows the user information in the a-user-dash-card component. I then navigate to the settings page and change the user first_name and last name. My problem is that when I navigate back to the dashboard page the changed first_name and last_name details are not shown. When I look at the vuex store I can see the vuex store shows the new data.

please can you help me discover what I’m not understanding here and how best to resolve it?

thanks

Hi

I think the problem is that you replaces your state with a new object and this isn’t working so good with reactivity. See here: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

As stated on the page write it like this instead:

mutations: {
    updateUser(state, payload) {
      state.user = Object.assign({}, state.user, payload);
    },
  },

or like this

mutations: {
    updateUser(state, { first_name, last_name ) {
      state.user.first_name = first_name;
      state.user.last_name = last_name;
    },
  },