1，入門案例

安裝庫。

npm install vuex@3

新建store.js。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}}
})export default store

main.js。

new Vue({render: h => h(App),store
}).$mount('#app')

最后，計數(shù)器案例。

<template><h1 @click="add">{{ $store.state.count }}</h1>
</template><script>
export default {name: 'App',methods: {add() {this.$store.commit('increment')}}
}
</script>

效果：

輔助函數(shù)

可以將數(shù)據(jù)自動變成計算屬性。

<template><h1 @click="add">{{ count }}</h1>
</template><script>
import { mapState } from "vuex";
export default {name: 'App',methods: {add() {this.$store.commit('increment')}},computed: {...mapState(['count'])}
}
</script>

2，mutations傳參

跟著后面寫就行，只能傳一個參數(shù)。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count += v}}
})this.$store.commit('increment', 5)

輔助函數(shù)

可以將mutations自動變成方法。

<template><h1 @click="increment(5)">{{ count }}</h1>
</template><script>
import { mapState, mapMutations } from "vuex";
export default {name: 'App',methods: {...mapMutations(['increment'])},computed: {...mapState(['count'])}
}
</script>

3，actions

異步操作數(shù)據(jù)。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}}
})this.$store.dispatch('incrementAction', 5)

輔助函數(shù)

可以將actions自動變成方法。

<template><h1 @click="incrementAction(5)">{{ count }}</h1>
</template><script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {name: 'App',methods: {...mapActions(['incrementAction']),...mapMutations(['increment'])},computed: {...mapState(['count'])}
}
</script>

4，getters

派生狀態(tài)，類似于計算屬性。

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}},getters: {count1(state) {return state.count + "個"}}
})$store.getters.count1 

輔助函數(shù)

可以將getters自動變成計算屬性。

<template><h1 @click="incrementAction(5)">{{ count1 }}</h1>
</template><script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {name: 'App',methods: {...mapActions(['incrementAction']),...mapMutations(['increment'])},computed: {...mapState(['count']),...mapGetters(['count1'])}
}
</script>

5，模塊拆分

新建a.js。

新增了一個配置項namespaced。

export default {namespaced: true,state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}},getters: {count1(state) {return state.count + "個"}}
}

b.js。

export default {namespaced: true,state: {count: 0},mutations: {increment(state, v) {state.count += v}},actions: {incrementAction(context, v) {setTimeout(() => {context.commit('increment', v)}, 1000)}},getters: {count1(state) {return state.count + "個"}}
}

改寫store.js。

const store = new Vuex.Store({modules: {a, b}
})

6，訪問子模塊的state

$store.state.a.count
$store.state.b.count

輔助函數(shù)

<template><div><h1>{{ count }}</h1></div>
</template><script>
import { mapState } from "vuex";
export default {computed: {...mapState('a', ['count'])}
}
</script>

7，訪問子模塊的getters

$store.getters['a/count1']
$store.getters['b/count1']

輔助函數(shù)

用法與前面一致。

8，訪問子模塊的mutations

this.$store.commit('a/increment', 1)

輔助函數(shù)

用法與前面一致。

9，訪問子模塊的actions

this.$store.dispatch('a/incrementAction', 1)

輔助函數(shù)

用法與前面一致。