Как обновить свойство компонента Vue при изменении состояния хранилища Vuex?

Question

Я создаю простой инструмент презентации, где я могу создавать презентации, называть их и добавлять/удалять слайды с Vue js и Vuex для управления состоянием приложения. Все идет отлично, но теперь я пытаюсь реализовать функцию, которая обнаруживает изменения в презентации (название изменено или добавлено слайдом/удалено) и пока не может найти правильное решение для него. Я просто приведу пример только для изменения названия для простоты. Сейчас в моем Vuex магазине у меня есть:

const state = { 
    presentations: handover.presentations, //array of objects that comes from the DB 
    currentPresentation: handover.presentations[0] 
} 

В моей презентации компонента у меня есть:

export default { 
    template: '#presentation', 
    props: ['presentation'], 
    data:() => { 
     return { 
      shadowPresentation: '' 
     } 
    }, 
    computed: { 
     isSelected() { 
      if (this.getSelectedPresentation !== null) { 
       return this.presentation === this.getSelectedPresentation 
      } 
      return false 
     }, 
     hasChanged() { 
      if (this.shadowPresentation.title !== this.presentation.title) { 
       return true 
      } 
      return false 
     }, 
     ...mapGetters(['getSelectedPresentation']) 
    }, 
    methods: mapActions({ 
     selectPresentation: 'selectPresentation' 
    }), 
    created() { 
     const self = this 
     self.shadowPresentation = { 
      title: self.presentation.title, 
      slides: [] 
     } 

     self.presentation.slides.forEach(item => { 
      self.shadowPresentation.slides.push(item) 
     }) 
    } 
} 

Что я сделал до сих пор является создание теневой копии моей презентации, когда компонент и затем путем вычислимого свойства сравнивают свойства, которые меня интересуют (в данном случае название), и возвращают true, если что-то другое. Это работает для обнаружения изменений, но то, что я хочу сделать, - это возможность обновить теневую презентацию при сохранении презентации, и до сих пор я этого не делал. Поскольку действие savePresentation запускается в другом компоненте, и я действительно не знаю, как выбрать событие «сохранить» внутри компонента презентации, я не могу обновить свою теневую презентацию. Любые мысли о том, как я могу реализовать такую ​​функцию? Любая помощь будет очень оценена! Заранее спасибо!

Answer 1

Я решил решить эту проблему по-другому, чем то, что я задал в вопросе, но для некоторых это может быть интересно. Итак, вот оно:

Сначала я отрекся от того, что хранилище vue связывает событие с компонентом, поскольку, когда вы используете vuex, у вас должно быть все состояние вашего приложения, управляемое хранилищем vuex. То, что я сделал, чтобы изменить структуру объекта презентации от

{ 
    title: 'title', 
    slides: [] 
} 

к чему-то немного более сложным, как этот

{ 
    states: [{ 
     hash: md5(JSON.stringify(presentation)), 
     content: presentation 
    }], 
    statesAhead: [], 
    lastSaved: md5(JSON.stringify(presentation)) 
} 

где presentation является простым объектом презентации, что я был в первый. Теперь у моего нового объекта презентации есть ссылка states, где я буду помещать все мои состояния представления, и каждое из этих состояний имеет хэш, сгенерированный строгим простым объектом представления и фактическим простым объектом презентации. Подобным образом я буду за каждое изменение представления генерировать новое состояние с другим хешем, а затем я могу сравнить свой текущий хэш состояния с последним, который был сохранен. Всякий раз, когда я сохраняю презентацию, я обновляю опору lastSaved до текущего хэша состояния. С этой структурой я мог бы просто реализовать функции отмены/повтора только с помощью состояний смещения/сдвига от states до statesAhead и наоборот, и это даже больше, чем я предполагал вначале, и, в конце концов, я сохранил все свое состояние, управляемое хранилищем vuex фрагментации моего состояния управления и загрязняющих компонентов.

Надеюсь, это было не слишком смущает и что кто-то находит это полезным. Cheers

Answer 2

У меня была эта проблема при попытке добавить новые свойства в мое пользовательское состояние, поэтому я закончил с этим, и он работает хорошо.

Действие в Vuex магазине

updateUser (state, newObj) { 
     if (!state.user) { 
     state.user = {} 
     } 
     for (var propertyName in newObj) { 
     if (newObj.hasOwnProperty(propertyName)) { 
      //updates store state 
      Vue.set(state.user, propertyName, newObj[propertyName]) 
     } 
     } 
    } 

Реализация

Позвоните в магазин действия выше от компонента Вью

this.updateUser({emailVerified: true}) 

Объект

{"user":{"emailVerified":true},"version":"1.0.0"}