为什么我提交将状态数据设置为null，组件状态不更改util我刷新页面？

Question

在我的store.js：

中

  state: {
  ...

  user_info: LocalStorageUtil.get('user_info')
  },

  mutations: {
    set_user_info_null(state){
      state.user_info = null
    }
  }

在我的组件中：

    // in the template
    <div v-if="user_info" class="welcome">
          <a @click="welcome_username">欢迎您,{{user_info.username}}!</a>/<a @click="logout">退出</a>
    </div>

// in the script
data(){
  return {
    user_info: this.$store.state.user_info,
    ...

  }

methods: {
  ...

  ... // in the logout method
  LocalStorageUtil.clear('user_info')
  this.$store.commit('set_user_info_null')  // store set to null

你看，我首先清除user_info，然后清除Vuex以提交set_user_info_null。 Vuex的州user_info将设置为null。

但是，在Component的数据中，user_info仍然是Object：

编辑-1

如果我使用代码：

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

我收到了一个错误：

  

TypeError：undefined不是对象（评估'Object.keys（map）'）

在这一行：

computed: {
  ...mapState("user_info")
},
components: {   // in this line
...

Answer 1

此部分在您的组件中存在问题

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

  }

您正在声明与Vuex存储分离的本地组件状态。当您更新Vuex商店时，这不会改变。

正确的方法是使用mapState

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

就像您将user_info作为prop传递给此组件一样。更新Vuex存储时，此组件也将更新。

Answer 2

在较新的（高于v.2.3.4）Vue.js版本中，代码将检查该集合，如果代码中有this.user_info=xxx：

您可以查看source code。

首先，我建议您更改this.$store.state.user_info=xxx替换this.user_info=xxx。

其次，你应该看一下Two-way Computed Property

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