Итерация по объекту магазина Vuex - PullRequest
Новая
       21

Итерация по объекту магазина Vuex

2 голосов
/ 07 марта 2019

Я новичок в 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 Development и обнаружил, что магазин действительно обновляется, как и компонент с уведомлениями, которые я передаю в магазин. Но компонент не отображается. Но если я использую те же данные, жестко закодировав их в компоненте, это сработает.

Я не уверен, что это правильный способ подключения хранилища Vuex к компоненту.

1 Ответ

1 голос
/ 07 марта 2019

Это проблема реактивности 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
  }
};
...