遍历 Vuex 存储对象

Question

我是 Vue.js 和 Vuex 的新手，正在试用示例应用程序。这是场景-

我有一个通知存储模块，它将通知存储在一个以给定名称作为键的对象中。

{
  'message1': {
    type: 'info',
    message: 'This is an info message.',
    isShown: true,
  },
  'message2': {
    type: 'success',
    message: 'This is a success message.',
    isShown: true,
  },
  'message3': {
    type: 'error',
    message: 'This is an error message.',
    isShown: true,
  }
}

这是我处理通知的 Vuex 模块-

const state = {
  notifications: {},
};

const mutations = {
  setNotification(state, { message, type, name }) {
    state.notifications[name] = {
      message,
      type,
      isShown: true,
    }
  },
  removeNotification(state, name) {
    delete state.notifications[name];
  }
};

const actions = {
  async showNotification(context, options) {
    await context.commit('setNotification', options);
  },
  async removeNotification(context, name) {
    await context.commit('removeNotification', name);
  }
}

const getters = {
  isNotificationShown: (state, getters) => {
    return getters.getNotificationMessageList.length > 0;
  },
  getNotificationMessageList: state => {
    return state.notifications;
  },
}

export default {
  state,
  actions,
  mutations,
  getters,
}

这是我的组件-

<template>
  <div v-if="isShown">
    <div v-for="(notice, name, index) in notificationMessageList" :key="name">
      {{ index }} - {{ notice.type }} - {{ notice.message}}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    isShown() {
      return this.$store.getters.isNotificationShown;
    },
    notificationMessageList() {
      return this.$store.getters.getNotificationMessageList; 
    },
  },
};
</script>

我检查了 Vue 开发工具，发现商店确实得到了更新，带有我传递给商店的通知消息的组件也得到了更新。但是组件没有被渲染。但是，如果我通过在组件中对其进行硬编码来使用相同的数据，它就可以工作。

我不确定这是否是将 Vuex 存储连接到组件的正确方法。

Answer 1

这是 Vue 反应性问题。您需要更新引用以使 Vue 具有反应性。你可以使用 JSON.parse(JSON.stringify()) 或使用 ES6 语法：

const mutations = {
  setNotification(state, { message, type, name }) {
    state.notifications = {
      ...state.notifications,
      [name]: {
        message,
        type,
        isShown: true
      }
    }
  },
  removeNotification(state, name) {
    const newNotifications = {...state.notifications}
    delete newNotifications[name]
    state.notifications = newNotifications
  }
};

遍历 Vuex 存储对象

Iterating over a Vuex store object

vue.js

vue-component

vuex

vuex-modules