Vuex 的使用
本教程源于官網(wǎng) 總結(jié)與官網(wǎng) https://vuex.vuejs.org/zh/guide/mutations.html
基本使用
1 mapState
mapState 是對變量狀態(tài)的動態(tài)改變
import {mapState} from 'vuex'
export default({
data(){
return {
add:1
}
}
computed:{
...mapState({
count, // 等價于store.state.count
aliasCount:state=>state.count // 關(guān)聯(lián)store.state.count 使用就用 aliasCount
counter(state){
return state.count+this.add // 為了能使用this 要寫成function 類型
}
})
}
})
2 getter的使用
import {mapState} from 'vuex'
export default({
data(){
return {
add:1
}
}
computed:{
...mapState({
count, // 等價于store.state.count
aliasCount:state=>state.count // 關(guān)聯(lián)store.state.count 使用就用 aliasCount
counter(state){
return state.count+this.add // 為了能使用this 要寫成function 類型
}
})
}
})
mapGetters
mapGetters 是在不改變變量下取值
也可以直接用 this.$store.state.xxx 簡單粗暴取值
mapGetters 是一種高級的取值方法
store 文件里面
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
在store 文件寫一個getter 函數(shù)后 我們可以用
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用對象展開運算符將 getter 混入 computed 對象中
...mapGetters([
'getTodoById', 直接取
aliasGetTodoById: 'getTodoById' // 重命名取值
])
}
}
3 Mutation 使用
注意事項:
- Mutation 必須是同步函數(shù)
2 最好提前在你的 store 中初始化好所有所需屬性。
3 Vue.set(obj, 'newProp', 123)
mutation 一般代表變量的改變 類似于handle
在store 聲明如下
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state,n) { // 其中 n 為參數(shù)
state.count+=n
}
}
})
Vue調(diào)用如下
export default {
methods: {
...mapMutations([
'add' // 將 `this.add(n)` 映射為 `this.$store.commit('add', n)`
]),
...mapMutations({
add: 'increment' // 重命名 將 `this.add()` 映射為 `this.$store.commit('increment')`，
})
}
}
store.commit('increment',n) // n為參數(shù)
另外 有一中 使用常量替代 Mutation 事件類型 為大型團隊用的 本人少用 列舉
參考 點擊進入 https://vuex.vuejs.org/zh/guide/mutations.html
4 Action
1 不用于Mutations 為異步調(diào)用
2 action 是context 對象
3 tore.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise迁筛，并且 store.dispatch 仍舊返回 Promise：
在store 聲明如下
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
checkout ({ commit, state }, products) {
const savedCartItems = [...state.cart.added]
commit(types.CHECKOUT_REQUEST)\
// 利用action 多重分發(fā)mutations
shop.buyProducts(
products,
() => commit(types.CHECKOUT_SUCCESS),
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
}
})
看出 actions 是context對象 可以解構(gòu)context對象 {state,commit}
可以用commit 調(diào)用內(nèi)部mutations方法
在Vue里使用如下
export default {
// ...
methods: {
...mapActions([
'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`
// `mapActions` 也支持載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
increment: 'add' // 將 `this.increment()` 映射為 `this.$store.dispatch('add')`,
})
}
}
action 的Promise 形式
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve() // 成功
}, 1000)
})
}
}
可以通過下面3 個方法調(diào)用
vue文件調(diào)用
store.dispatch('actionA').then(() => {} )
action 調(diào)用action
actions: {
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
** async await**
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
基礎(chǔ)寫法完結(jié)
module 寫法鏈接 http://www.reibang.com/p/373fe7a59f3d
github 賬號Theodore-Ritchie
