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存储对象

1 个答案: