Блог

Я новичок в 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 к компоненту.

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