Vuex架构设计

记录最近学到的应该怎样去设计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()对数据进行修改和处理。



学习笔记,如有不足请多指教!

猜你喜欢

转载自blog.csdn.net/sanstu/article/details/78039250