Vuex3学习笔记

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')

最后，计数器案例。

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

效果：

辅助函数

可以将数据自动变成计算属性。

<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传参

跟着后面写就行，只能传一个参数。

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

辅助函数

可以将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

异步操作数据。

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)

辅助函数

可以将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

派生状态，类似于计算属性。

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 

辅助函数

可以将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

辅助函数

<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']

辅助函数

用法与前面一致。

8，访问子模块的mutations

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

辅助函数

用法与前面一致。

9，访问子模块的actions

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

辅助函数

用法与前面一致。