如何在Vuex存儲狀態更改時更新Vue組件屬性？

我正在構建一個簡單的演示工具，在這裏我可以創建演示文稿，命名它們並使用Vue js和Vuex添加/刪除幻燈片來處理應用程序狀態。一切都很順利，但現在我試圖實現一個功能，檢測演示文稿中的更改（標題已更改或幻燈片添加/刪除），並且還找不到適合它的正確解決方案。爲了簡單起見，我只舉例說明標題更改的例子。現在在我的店裏Vuex我：如何在Vuex存儲狀態更改時更新Vue組件屬性？

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動作，並且我不知道如何在演示文稿組件中選擇「保存」事件，所以無法更新我的影子演示文稿。有關如何實現此功能的任何想法？任何幫助將非常感激！提前致謝！

來源

2016-09-02 António Quadrado

我最終解決這個問題的方式與我在問題中提出的方式不同，但它可能會對某些人感興趣。所以這裏是：

首先，我放棄了讓我的vue商店將一個事件傳遞給組件，因爲當您使用vuex時，您應該擁有由vuex商店管理的所有應用程序狀態。我所做的就是將演示文稿對象結構從

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

改變的東西多一點複雜的，像這樣的

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

其中presentation是一個簡單的介紹對象，我在第一。現在我的新演示對象有一個道具states，我將放置所有演示文稿狀態，並且每個狀態都有由串化簡單演示文稿對象和實際簡單演示文稿對象生成的散列。就像這樣，我會爲每一次改變都生成一個不同散列的新狀態，然後我可以將我當前狀態散列與最後一個散列狀態進行比較。每當我保存演示文稿時，我都會將lastSaved prop更新爲當前狀態散列。通過這種結構，我可以簡單地實現撤銷/重做功能，只需將狀態從states移至statesAhead，反之亦然，這甚至超過了我一開始所預期的狀態，最終我將所有狀態保存在vuex商店中分解我的國家管理和污染組件。

我希望它不會太令人困惑，並且有人認爲這很有幫助。乾杯

來源

2016-09-06 11:47:18

智能解決方案，不適合我個人使用，但智能仍然 - 很好的工作！ :) –

非常感謝！ ;） –

但爲了記錄，我在兩位隊友的幫助下來到了這裏。學分並不全是我的。 –

我試圖向用戶狀態添加新屬性時遇到了這個問題，所以我最終得到了這個結果，它運行良好。在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]) 
     } 
     } 
    }

實施

打電話給你的店從Vue的組件上面的動作

this.updateUser({emailVerified: true})

對象

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

來源

2018-03-01 12:31:31 wchoward

如何在Vuex存儲狀態更改時更新Vue組件屬性？

回答

相關問題