目录
Vuex核心概念：
State：存储应用状态数据的对象，与vue中data类似
Getters：类似vue的计算属性，store中数据的变化，getters的数据也会发生变化
Mutations：提交mutation来修改store中的状态，同步操作
Actions：与mutations类似，提交修改state的行为，处理异步任务（提交的是mutation，不是直接修改状态）
Modules：模块化状态管理，为了开发大型项目，方便状态管理而使用的
1、State
1）全局state
直接使用：
this.$store.state.xxx;
map辅助函数：
computed: {
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
2）使用modules中的state
直接使用：
this.$store.state.模块名.xxx;
map辅助函数：
computed: {
...mapState('模块名', ['xxx']),
...mapState('模块名', {'新名字': 'xxx'})
}
2、Getters
1）全局Getters
直接使用：
this.$store.getters.xxx;
map辅助函数：
computed: {
...mapGetters(['xxx']),
...mapGetters({'新名字': 'xxx'})
}
2）使用modules中的getters
直接使用：
this.$store.getters[模块名/xxx];
map辅助函数：
computed: {
...mapGetters('模块名', ['xxx']),
...mapGetters('模块名',{'新名字': 'xxx'})
}
3、Mutations
1）全局Mutations
直接使用：
this.$store.commit('mutation名', 参数);
map辅助函数：
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
2）使用modules中的mutations（namespaced:true）
直接使用：
this.$store.commit('模块名/mutation名', 参数);
map辅助函数：
methods: {
...mapMutations('模块名', ['xxx']),
...mapMutations('模块名',{'新名字': 'xxx'})
}
4、Actions
1）全局Actions
直接使用：
this.$store.dispatch('action名', 参数);
map辅助函数：
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}
2）使用modules中的actions（namespaced:true）
直接使用：
this.$store.dispatch('模块名/action名', 参数)
map辅助函数：
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}
5、有无modules的目录结构对比
没有使用modules的文件目录如下：
使用modules的文件目录如下：
