手把手教你學vue 4(vuex)

2022-08-05 18:21:07 字數 2046 閱讀 1331

管理統一元件狀態state。每個應用將僅僅包含一個 store 例項。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段,在除錯的過程中也能輕易地取得整個當前應用狀態的快照。
vuex 通過 store 選項,提供了一種機制將狀態從根元件“注入”到每一個子元件中(需呼叫 vue.use(vuex)):

// 把 store 物件提供給 “store” 選項,這可以把 store 的例項注入所有的子元件

store,

components: ,

template: `

`})通過在根例項中註冊 store 選項,該 store 例項會注入到根元件下的所有子元件中,且子元件能通過this.$store 訪問到

當我們需要時刻跟蹤狀態值的變化時,可以通過元件的計算機屬性來確定,然後使用mapstate.方法來對映。

computed: ,

// 使用物件展開運算子將此物件混入到外部物件中

...mapstate()

}

vuex 允許我們在 store 中定義“getter”(可以認為是 store 的計算屬性)。就像計算屬性一樣,getter 的返回值會根據它的依賴被快取起來,且只有當它的依賴值發生了改變才會被重新計算。
import  from 'vuex'

export default

}

更改 vuex 的 store 中的狀態的唯一方法是提交 mutation,呼叫方法store.commit('increment')

mutation 必須是同步函式

mapmutations

import  from 'vuex'

export default )

} }

context 不是 store 例項本身

action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件,因此你可以呼叫 context.commit 提交一個 mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters。

actions: ) 

}

mapactions對映到元件
import  from 'vuex'

export default )

}}

概念

vuex 允許我們將 store 分割成模組(module)。每個模組擁有自己的 state、mutation、action、getter.類似redux裡面的reducer 針對每個元件對應的state狀態做處理

const modulea = ,

mutations: ,

actions: ,

getters:

}const moduleb = ,

mutations: ,

actions:

}const store = new vuex.store(

})store.state.a // -> modulea 的狀態

store.state.b // -> moduleb 的狀態

對於模組內部的 action,區域性狀態通過 context.state 暴露出來,根節點狀態則為 context.rootstate。

rootstate 可以獲取到所有mudule裡面的state值

const modulea = ) 

}}}

這個還是要多看官方的demo

手把手教你使用Vuex(三)

2 mutation屬性 瞭解 mutation是更改vuex的store中的狀態的唯一方法。非常類似於事件,官網說的 每個mutation...

Vue CLI 手把手教你擼外掛

現如今 vue 作為主流的前端框架之一,其健全的配套工具,活躍的開源社群,讓廣發碼農熱衷追捧。vue cli 作為其官方的開發構建工具,目前...

手把手教你Dojo入門

如果僅僅是為了練習dojo 或者進行測試,可以參考下面的步驟。下面的檔案均是在windows下測試 3 瀏覽器 博主使用的是chrome 接...