为什么我承诺将状态的数据设置为空，组件状态不会改变 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 commit set_user_info_null。 Vuex 的状态 user_info 将被设置为 null.

但是，在组件的数据中，user_info 仍然是对象：

编辑-1

如果我使用代码：

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

我收到一个错误：

TypeError: undefined is not an object (evaluating '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 store 更新时，这个组件也会更新。

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')
    }
  }
}

为什么我承诺将状态的数据设置为空，组件状态不会改变 util 我刷新页面？

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

vue.js

vuex