状态vuex存储无法正常工作-VueJS

Question

为什么$store工作不正常？

我的代码如下：

export default {
  data() {
    return {
      siteName: null,
      fileLogo: null,
      fileFavicon: null,
      setting: this.$store.state,
    };
  },
  ....
};

该设置具有值：

{
  "setting":{
    "id":1,
    "Title":"Laundry Sepatu",
    "Short_Title":null,
    "Logo":"Site_Logo.jpg",
    "Favicon":"Site_Favicon.png",
    "user_id":null,
    "created_at":"2020-07-29T09:00:28.000000Z",
    "updated_at":"2020-07-29T09:00:28.000000Z"
  },
  "user":{
    "user":{
      "id":1,
      "name":"admin",
      "email":"admin@admin.com",
      "email_verified_at":null,
      "created_at":null,
      "updated_at":null
    },
    "token":"2|BEVhUeO..."
  }
}

但是当我更改为：

export default {
  data() {
    return {
      siteName: null,
      fileLogo: null,
      fileFavicon: null,
      setting: this.$store.state.setting,
    };
  },
  ...
};

该设置为空。

Answer 1

首先，我想您的setting初始状态为空，一段时间后，您调度了一个操作来对其进行更新。您的突变可能类似于：

someMutation (state, setting) {
  state.setting = setting
}

提交someMutation时，只需将setting对象的新引用分配给state.setting属性，而不更新旧引用。

因此，在您的第二个示例this.setting中，该this.$store.state.setting拥有状态的初始引用。

要使其正常工作，请不要与data一起使用，而应与computed一起使用，它将在其依赖关系更改时重新计算。

computed: {
  setting () {
    return this.$store.state.setting
  }
}

请参见example。

或与mapState助手一起使用。