[Vuejs]-Why I commit to set the state's data to null, the component state do not change util I refresh the page?

by

0👍

✅

This part is problematic in your component

data(){
  return {
    user_info: this.$store.state.user_info,
    ...

  }

You are declaring a local component state that is separated from the Vuex store. When you update Vuex store, this won’t change.

The right way is by using mapState

import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["user_info"])
  }
};

It would be like you are passing user_info as a prop to this component. When Vuex store is updated, this component will be updated as well.

0👍

In the newer( higher than v.2.3.4 ) version Vue.js the code will check the set, if in your code has this.user_info=xxx :

You can check the source code.

So, first I will recommend you change the this.$store.state.user_info=xxx replace of this.user_info=xxx.

Second you should take a look at the Two-way Computed Property

computed: {
  message: {
    get () {
      return this.$store.state.user_info
    },
    set (value) {
      this.$store.commit('set_user_info_null')
    }
  }
}

Leave a comment