5

I have a UserDialog component which leverages a part of the Vuex state-tree to determine whether it should display itself or not:

import { Component, Prop, Vue } from 'vue-property-decorator';
import { State, Getter, Mutation, Action, namespace } from 'vuex-class';
import { fk } from 'firemodel';
import { User } from '@/models/User';
const Users = namespace('users');

@Component({})
export default class UserDialog extends Vue {
  @Prop() public id!: fk;
  @Users.State public show: fk;
  @Users.Getter public selectedUser: User;
  @Users.Mutation public HIDE_USER_PROFILE: () => void;

  public get showDialog() {
    return this.show === undefined ? false : true;
  }

}

From the parent component I am calling Vuex's commit('SHOW_USER_PROFILE', id) and thereby setting this ID it should update the UserDialog's show property accordingly.

enter image description here

I can see very clearly that the Vuex store has received the call to SHOW_USER_PROFILE and that indeed has updated the state in the state tree (this is through the Vue Developer plugin in the browser). But then when I switch over to the UserProfile component I see that it still has not received the state update.

Note: if I reload the page (aka, CMD-R) after having set the UserID I want to highlight, it reloads the components and because I'm using veux-persist, the ID is still set in the state tree. At this point the component DOES receive the correct state but when relying on the normal reactivity system it just doesn't work.

Can anyone help?


for additional context, here are a few more modules:

Store Definition::

export default new Vuex.Store<IRootState>({
  modules: {
    packages,
    users,
    searchCriteria,
    snackbar
  },
  plugins: [FireModelPlugin, localStorage.plugin]
});

Users Mutations:

const mutations: MutationTree<IUsers> = {
  selectUser(state, id: fk) {
    state.selected = id;
  },
  SHOW_USER_PROFILE(state, id: fk) {
    state.show = id;
  },
  HIDE_USER_PROFILE(state) {
    state.show = undefined;
  }
};

I have added a computed property to the UserDialog component above:

public get userId() {
  return this.$store.state.users.show;
}

There was a thought that maybe this would be reactive whereas the @Users.State decorated show property was not. Unfortunately, they both perform exactly the same.

enter image description here

13
  • Please provide all relevant code, including your vuex module Jul 9, 2018 at 6:44
  • Yeah that's often quite hard when there's a larger code base but I'll try and add a bit more context now.
    – ken
    Jul 9, 2018 at 6:47
  • It looks like you aren't reactively getting the state from vuex, what you're doing is more akin to defining it once and then never again. Instead, use a computed property to get the vuex state reactively Jul 9, 2018 at 7:03
  • My -- maybe false -- understanding was that using the vuex-class definition you were getting a reactive property on the class. If that's not the case I feel the Getter decorator is a bit dangerous.
    – ken
    Jul 9, 2018 at 7:32
  • The getter should be reactive, but you're using the this.show instead, which is not a getter Jul 9, 2018 at 7:37

2 Answers 2

4

@Derek and I talked last night and realized that the cause of this problem was due to the state transitions to "undefined" which the current Reactive system does not handle (it should be fine when we get to Vue-NEXT with Object Proxies). The remaining code works just fine when I switch out the state transition from: undefined → string → undefined to null → string → undefined.

Many thanks to @Derek for spending the time.

1
  • Thanks! I had exactly the same issue and using null instead of undefined fixed it. My takeaway: avoid undefined when using vuex
    – developius
    Apr 4, 2020 at 4:55
-2

In the example above you're directly calling the Vuex state store. When you do this from your component this is a one time get deale. The state store is not reactive and will never tell your computed property that it changed.

The correct way to get the reactivity you're looking for is to implement Vuex getters:

const store = new Vuex.Store({
  state: {/*...*/},
  getters: {
    show(state) {
      return state.show;
    }
  }
})

Then in your component:

computed: {
  show() {
    return this.$store.getters.show;
  }
}

Read more about Vuex getters here: https://vuex.vuejs.org/guide/getters.html

1
  • That's wrong, anything inside a computed property is reactive, as long as its source data is. Jul 9, 2018 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.