Vue經驗總結

題記：前段時間時隔8個月重新拾起了vue，vue的太（yi）好（jing）用（wang）了（wan）。

以前用慣了react的dva然後突然切換到vue的vuex真的有點不習慣。

這個是vuex中的大哥大，什麼都歸它管（state、mutations、getter、action、module），你可以把它理解為乙個倉庫（官方文件也是這麼說的）

// 建立stroe
const store = new vuex.store(,
mutations: 
}})

每個stroe中都會有這麼乙個狀態樹、對於vue來說他是全域性的，對於store來說他是唯一的，我們可以把它理解為倉庫中的貨物，當客戶（vue）中想要取出倉庫（store）中的貨物（state），很簡單this.$stroe.state.test

mutation 必須是同步函式

更改 vuex 的 store 中的狀態的唯一方法是提交 mutation。這個我們可以把它比喻為乙個訂單（mutation），當客戶（vue）需要改變倉庫（store）中的貨物（state）時，我們就可以通過這個方法去改變，但是這個方法在本地是不能被直接呼叫的，你需要以相應的 type 呼叫store.commit方法：

// 無引數提交
store.commit('increment')
// 有引數
store.commit('increment', )
// or
store.commit()

其實這一點和dva有點相似

這個和mutation和相似，但是：

action 提交的是 mutation，而不是直接變更狀態。

action 可以包含任意非同步操作。

而且actions是與mutation的觸發方法也不同，它是用的store.dispatch(確認過眼神)，而且它可以呼叫actions，講道理它是比mutation高乙個等級的。

至於剩下的getter、module目前好像還沒有怎麼用到，就下次用了體驗了過後再說吧。

在vuex中所有的輔助函式都只有乙個目的，方便你我他

當我們需要在乙個頁面中獲取store中的多個狀態時，怎麼辦

// bad this.$store.state.a this.$store.state.b this.$store.state.c // good computed:)

}

但是這個地方有乙個坑，如果a是乙個物件

a:
}computed:)
}

這樣是不行的，具體為什麼我也不是很清楚，求大佬講解

未完待續...

Vue經驗總結

vue面試經驗總結

經驗總結資料預處理經驗總結1

C 經驗總結

Vue經驗總結

vue面試經驗總結

經驗總結 資料預處理經驗總結1

C 經驗總結

相關推薦

經驗總結資料預處理經驗總結1