vuex中几个文件的说明及方法调用

1、一般vuex的文件结构如下

保存在store文件夹下

2、index.js,更多的都命名为store.js，这不重要

Vuex 中 Store 的模板化定义如下

图二是logger提供的信息，方便我们查看state数据的变化

3、state.js

相当于数据库,定义了应用数据的数据结构及初始状态

4、getters.js

就是获取state中状态，仅单向的获取数据，不做任何修改。

5、mutation-types.js

这个脚本下存放的都是一些vuex常用的变量

当然这个不是必须的，也可以没有，那么为什么要建一个这样的文件呢？

原因是便于书写方便和一个eslink工具等帮我们检测一些错误的；

6、mutations.js

定义state数据的修改操作

从图上可以看出mutation-types定义的变量在这里得到了应用

7、actions.js

调用mutation方法对数据进行操作,

这里可以对数据进行一些复杂的操作，mutations中只是简单的数据操作

8、调用getters方法

先import引入mapGetters方法

在vue的computed下调用...mapGetters([]）,中括号中写入要获取的数据的getters方法

9、调用mutations方法

先import引入mapMutations方法

在vue的methods下调用...mapMutations({}）,大括号中写入要修改的数据的mutations方法

10、调用ations方法

先import引入mapActions方法

在vue的methods下调用...mapActions([]),中括号中写入要修改的数据的ations方法