Vue建立四使用vuex

1、在vue專案的src目錄下建立store資料夾，建立index.js檔案

//store/index.js
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex);
const store = new vuex.store(,
mutations: 
}});
export default store

2、store

main.js中註冊store選項，該 store 例項會注入到根元件下的所有子元件中，且子元件能通過this.$store訪問到

import store from './store'
...new vue()

3、state

在子元件中訪問更改狀態，有多種方式

1)this.$store.state.count

2) 當需要獲取多個狀態時，使用

mapstate輔助函式，它會返回乙個物件

檢查報告詳情
}}click

當需要對state中的資料做某種計算時，一般使用

computed:           
}

當多個子元件需要相同的計算時，可以將這些方法寫到store的getters中

state: ,]
},	getters: 
},

子元件呼叫

/*listcount () ,*/
todoitem () ,
//mapgetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：
...mapgetters(['listcount'])

4、mutation

更改 vuex 的 store 中的狀態的唯一方法是提交 mutation

每個 mutation 都有乙個字串的事件型別 (type) 和乙個 **函式 (handler)。這個**函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第乙個引數

觸發mutation中的事件：store.commit('increment')

向store.commit傳入額外的引數，即 mutation 的載荷（payload）

//.vue
methods: 
}//store
mutations: else
}}

載荷一般是乙個物件，這樣可以包含多個字段並且記錄的 mutation 會更易讀

methods: );
}}//
mutations: else
}}

methods: );
this.$store.commit()
}*/...mapmutations()
}

物件的方式提交：type=對應的mutation方法

this.$store.commit()

mutation 必須是同步函式

在 mutation 中混合非同步呼叫會導致你的程式很難除錯。例如，當你呼叫了兩個包含非同步**的 mutation 來改變狀態，你怎麼知道什麼時候**和哪個先**呢？這就是為什麼我們要區分這兩個概念。為了處理非同步操作，讓我們來看一看 action。

5、action

action 類似於 mutation，不同在於：

actions: */
increment () 
}

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

action 通過store.dispatch方法觸發，在 action 內部執行非同步操作

methods: );
//this.$store.commit()
this.$store.dispatch('incrementasync')	}}
//import types from './mutationtypes'
actions: */
[types.increment] () ,
[types.incrementasync] () ,500)			
}	  }

actions 支援同樣的載荷方式和物件方式進行分發

在元件中分發 action

使用mapactions輔助函式將元件的 methods 對映為store.dispatch呼叫

import  from 'vuex'
methods: );
//this.$store.commit()
this.$store.dispatch('incrementasync')
}*//*...mapmutations()*/
...mapactions()
}

store.dispatch可以處理被觸發的 action 的處理函式返回的 promise，並且store.dispatch仍舊返回 promise

handlecountadd () )
}

6、　modules

將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割


const modulea = 
}const moduleb = 
}const store = new vuex.store(
})computed: 
}

Vue建立四使用vuex

vue專案中使用vuex

vue中的vuex的使用

在vue專案裡面使用vuex

Vue建立四 使用vuex

vue專案中使用vuex

vue中的vuex的使用

在vue專案裡面使用vuex

相關推薦

Vue建立四使用vuex