什么是vuex:
个人简单理解:vue的页面都是由不同的组建构成的,组建与组建(父子组建,兄弟组建)之间可能存在数据交互,vuex就是用来做这样的数据交互的。
安装vuex(vuex的版本和vue的版本保持一致):
npm install vuex --save
使用vuex:
(1)创建目录
测试目录在src文件夹下新建vuex的文件夹,在vuex中新建一个store.js,可以将store.js理解为可被所有组建访问的公共的存储数据的文件,所有组建都可以从这个文件中取数据,做更改,并且这些更改会及时响应到调用这些数据的其他组建中。
(2)配置文件
main.js:
main.jsstore.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中修改的代码运行之后发现效果不变。这种方式简洁明了,代码冗余也少。
你所羡慕的一切,都是有备而来。