无法读取null的属性'list' - VueJS

Question

我使用Vuex创建一个Notification组件来存储数据API并在组件中调用它但我有一些问题

Component.vue

<template>
  <div class="notification_check">
     <div class="header">
        <span>Notifications </span>
        <span>(1)</span>
     </div>
  </div>
  <ul v-for="notification in $store.state.notification.notifications.list" :key="notification.id">
    {{notification.id}}
  </ul>
</template>
<script>
export default {
  data: function () {
    return {
      config: {
        'headers': {
          'Authorization': 'JWT ' + this.$store.state.token
        }
      },
      notifications: this.$store.state.notification.notifications.list
    }
  },
  created: function () {
    this.getNotification()
  },
  methods: {
    getNotification: function () {
      this.$store.dispatch('getNotification', this.config)
    }
  }
}
</script>

这是行动提交：

getNotification ({commit}, config) {
    api.get(`/notifications/`, config)
    .then(response => {
      commit('GET_NOTIFICATION', response.data)
    })
  },

这是我存储在Vuex Store中的数据API。请看一下：

发生错误： Cannot read property 'list' of null