本文详细介绍了Vuex的架构设计，包括store目录下的index.js、state.js、getters.js、mutations.js、mutations-types.js和actions.js的作用。强调了在state中定义数据，getters用于获取数据，mutations用于安全修改state，actions处理复杂逻辑并通过commit触发mutations。同时提到了mutations-types.js用于集中管理mutation名称，以及在组件内如何使用辅助函数mapGetters、mapMutations和mapActions来便捷地调用Vuex的state、mutations和actions。最后指出，通过这种方式可以更清晰地组织和管理应用状态。
记录最近学到的应该怎样去设计Vuex
首先代码都放在src下的store目录
store下有六个js文件：
1.index.js：入口文件，
其中debug是线下false，线上true。
然后strict是是否开启严格模式，开启时会检测对state的修改是不是通过mutations来修改的，如果不是则会报错。
最后plugins是Vuex的插件，而createLogger是Vuex的内置的打印日志插件，在state修改后会打印各种日志，比如修改前的state是什么修改后的是什么等等。。。
2.state.js：定义、管理所有的数据状态，就是存放数据的地方
3.getters.js：获取state下的数据，state的映射
4.mutations.js：对state进行修改的地方
这里我只对state进行简单的修改操作而已，不管是同步还是异步的逻辑我都写在actions里，然后再commit给mutaions就可以了
5.mutations-types.js：所有mutation相关的名字都在mutation-types
这样书写方便以及lint工具能帮我们检测这样写对不对
6.actions.js就是对数据进行各种操作的地方啦，这里就不多说了。
然后在组件内调用getters,mutations,actions是可以通过Vuex提供的语法糖，也就是辅助函数来调用。
这里mapGetters和mapMutations、mapActions一定要分别在computed,methods里用扩展运算符的方式调用辅助函数。
然后就可以在当前实例下通过this.playing获取state中playing的数据，相当于data里面有个playing。
然后setFullScreen，savePlayHistory相当于在methods里有这两个方法,可以直接通过this.setFullScreen()和this.savePlayHistory()对数据进行修改和处理。
学习笔记，如有不足请多指教！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
