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

一、Vuex初體驗

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

1、Store

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

// 創建stroe const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}} })

2、State

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

3、Mutation

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

// 無參數提交 store.commit('increment') // 有參數 store.commit('increment', {amount: 10 }) // OR store.commit({type: 'increment',amount: 10 })

其實這一點和dva有點相似

4、Action

這個和Mutation和相似，但是：

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

Action 可以包含任意異步操作。

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

至于剩下的Getter、Module目前好像還沒有怎么用到，就下次用了體驗了過后再說吧。

二、Vuex中的輔助函數

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

1、mapState

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

// bad this.$store.state.a this.$store.state.b this.$store.state.c // good computed:{...mapState({a:state=>state.a,b:state=>state.b,c:state=>state.c}) }

但是這個地方有一個坑，如果a是一個對象

a:{d:1,e:{f:2} } computed:{...mapState({f:state=>state.a.e.f}) }

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

未完待續...

總結

以上是生活随笔為你收集整理的Vue经验总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。