vuex簡單化理解和安裝使用

1.簡單化理解

首先你要明白 vuex 的目的就是為了集中化的管理專案中元件所有的資料狀態 (state)

0. 第一步你要明白 , store 的重要性 , store 類似乙個**基站,所有的訊號和資料處理都必須由 store 來處理 , store 其實本質也是乙個物件，裡面有這四個必傳的屬性 state actions mutations

1. state 是乙個物件，高於任何元件層面的物件，所以任何元件可以通過 mapstate 獲取到你想要的 state 裡面的資料，其中 mapstate 其實就資料分發 , 通過es6 改造 this.$store.state. 來取值

2. action 這個其實就是訊號源，你要修改 state ，就要傳送 (dispatch) action ，通知store 提交(commit) mutations ，

3. actions 寫完，就緊接著寫 mutations， mutation 負責修改資料，接收action 傳送過來的資料，修改state

4. state 修改完畢後，vuex的響應式資料系統會重新重新整理元件

5. 你在元件裡面需要做的就是傳送訊號，通過store ，怎麼傳送訊號呢，就是發出 action, 你可以 this.$store.dispatch('actiontype',傳遞的引數) 或者 mapactions 來直接取到 action ，然後函式觸發

2.vuex的安裝使用

安裝:npm i vuex -s

引入:import vuex from "vuex"

注入:vue.use(vuex)

建立store

export let store = new vuex.store()

將store例項注入到初始化**中

new vue()

state : 封裝資料模型

mutation : 封裝修改資料模型方法 (必須是純函式,必須是同步函式)

getter : 對資料模型進行二次計算 (相當於store的計算屬性)

action : 封裝業務邏輯可以是非純函式也可以封裝非同步方法 (封裝業務邏輯)

modules : 將多個小的store組裝成大的store (用於store的拆分)

除了資料模型其他的幾個都是可全域性訪問的為了避免開發時命名衝突可開啟區域性命名空間

namespaced : 值為true時開啟區域性作用域

在元件內需要通過計算屬性將state中的資料傳遞給模板}}

呼叫mutation : this.$store.commit("name",data)

this.$store.commit("home/name",data) //開啟命名空間時

name為封裝的mutation名 data為要傳給mutation的資料我們稱之為載荷

呼叫getter : this.$store.getters["name"]

this.$store.getters["home/name"] //開啟命名空間時

呼叫action : this.$store.dispath("name",data)

this.$store.dispath("home/name",data) //開啟命名空間時

data同樣為載荷

工具方法

mapstate mapgetters mapmutations mapactions

使用:),

...mapstate(["name"]),

...mapstate("home",["name"]),//開啟命名空間時}}