什么是vuex:
个人简单理解：vue的页面都是由不同的组建构成的，组建与组建（父子组建，兄弟组建）之间可能存在数据交互，vuex就是用来做这样的数据交互的。
安装vuex(vuex的版本和vue的版本保持一致):
npm install vuex --save
使用vuex:
（1）创建目录
测试目录
在src文件夹下新建vuex的文件夹，在vuex中新建一个store.js，可以将store.js理解为可被所有组建访问的公共的存储数据的文件，所有组建都可以从这个文件中取数据，做更改，并且这些更改会及时响应到调用这些数据的其他组建中。
（2）配置文件
main.js:
main.js
store.js
store.js
（3）组建之间的数据交互测试
创建两个组建a.vue和b.vue，将它们作为子组建导入HelloWorld.vue，那么a组建和b组建就是兄弟组建。
测试需求：在b组建中对author和another修改值，在a组建内响应。
a.vue和b.vue的代码：
a.vue
在computed计算属性中获取，因为computed中的函数会在被计算的属性发生变化时及时响应。
b.vue
然后跑起项目，就能实现a，b之间的数据交互。
但是这样的写法有一个不好的地方，就是如果a.vue中要访问的这样的数据条目有很多，每一个都在computed函数中进行计算，就会造成代码重复和冗余，基于此，vuex提供了一个函数mapState，用来批量到的获取store中的数据。
在a.vue中使用mapState：
a.vue中修改的代码
运行之后发现效果不变。这种方式简洁明了，代码冗余也少。
你所羡慕的一切，都是有备而来。
网友评论