摘要:中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。這個回調函數就是我們實際進行狀態更改的地方,并且它會接受作為第一個參數。但是要記住提交的是而不是直接改變。
vuex采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。每個應用將僅僅包含一個 store 實例。Vuex 通過 store選項,提供了一種機制將狀態從根組件『注入』到每一個子組件中(需調用 Vue.use(Vuex))。
五個核心概念
State: state為store中的最基本的狀態。
既然 Vuex 的 store 中的狀態是響應式的,那么當我們變更狀態時,監視狀態的 Vue 組件也會自動更新。這也意味著 Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項:
最好提前在你的 store 中初始化好所有所需屬性。當需要在對象上添加新屬性時,你應該
使用 Vue.set(obj, "newProp", 123), 或者以新對象替換老對象。例如,利用 stage-3 的對象展開運算符我們可以這樣寫:state.obj = { ...state.obj, newProp: 123 }
Vue.set(obj, "newProp", 123) state.obj = { ...state.obj, newProp: 123 }
Getter:getters為從state中派生出的一些狀態,相當于state的計算屬性。當getter所依賴的state值發生變化時,getters會被重新計算。getters接受store作為第一個參數,暴露為store.getters。getters還可以接受其他getters作為第二個參數。
Mutations:更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件:每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方,并且它會接受 state 作為第一個參數。mutation雖然類似于一個事件,但是不能直接調用,要通過store.commit("increment")的方式觸發。你可以向 store.commit 傳入額外的參數。
mutation 必須是同步函數
你可以在組件中使用 this.$store.commit("xxx") 提交 mutation,或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用(需要在根節點注入 store)。
Action:因為mutation為同步函數而存在。so Action是可以包含任何異步操作的。但是要記住Action提交的是mutation而不是直接改變state。Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象,因此你可以調用 context.commit 提交一個 mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88590.html
摘要:如果不熟悉,在這個教程里面,我們會通過構建一個筆記應用來學習怎么用。這個是我們要構建的筆記應用的截圖你可以從下載源碼,這里是的地址。每當用戶點擊筆記列表中的某一條時,組件會調用來分發這個會把當前選中的筆記設為。 原文:Learn Vuex by Building a Notes App,有刪改。 本文假設讀者熟悉 Vuex 文檔 的內容。如果不熟悉,you definitely sho...
摘要:有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂,之后會進行整理優化。 上次學習了vue-router的使用,讓我能夠在各個頁面間切換,將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。 注:本...
摘要:而鉆研最好的方式,就是閱讀的源代碼。整個的源代碼,核心內容包括兩部分。逃而動手腳的代碼,就存在于源代碼的中。整個源代碼讀下來一遍,雖然有些部分不太理解,但是對和一些代碼的使用的理解又加深了一步。 筆記中的Vue與Vuex版本為1.0.21和0.6.2,需要閱讀者有使用Vue,Vuex,ES6的經驗。 起因 俗話說得好,沒有無緣無故的愛,也沒有無緣無故的恨,更不會無緣無故的去閱讀別人的源...
摘要:的數據會在上顯示出來,用戶會根據上的內容進行操作,從而觸發,接著再去影響是單向數據流的方式驅動的。當我們的應用遇到多個組件共享狀態時,單向數據流的簡潔性很容易被破壞。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。 組件是Vue最強大的功能之一,而組件實例的作用域是相互獨立的,意味著不同組件之間的數據是無法相互使用。組件間如何傳遞數據就顯得至關重要,這篇文章主要是介紹Vu...
摘要:官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章,一直想有機會再次實踐下。 2道面試題:輸入URL按回車&HTTP2 - 掘金通過幾輪面試,我發現真正那種問答的技術面,寫一堆項目真不如去刷技術文章作用大,因此刷了一段時間的博客和掘金,整理下曾經被...
閱讀 2003·2021-11-23 10:08
閱讀 2336·2021-11-22 15:25
閱讀 3275·2021-11-11 16:55
閱讀 771·2021-11-04 16:05
閱讀 2600·2021-09-10 10:51
閱讀 711·2019-08-29 15:38
閱讀 1582·2019-08-29 14:11
閱讀 3486·2019-08-29 12:42