文章目录
- 1，入门案例
- 辅助函数
- 2，mutations传参
- 辅助函数
- 3，actions
- 辅助函数
- 4，getters
- 辅助函数
- 5，模块拆分
- 6，访问子模块的state
- 辅助函数
- 7，访问子模块的getters
- 辅助函数
- 8，访问子模块的mutations
- 辅助函数
- 9，访问子模块的actions
- 辅助函数
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)
辅助函数
用法与前面一致。
