您的当前位置:首页Vuex_状态管理01(state和mapState)

Vuex_状态管理01(state和mapState)

2024-12-14 来源:哗拓教育

什么是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中修改的代码

运行之后发现效果不变。这种方式简洁明了,代码冗余也少。


你所羡慕的一切,都是有备而来。

显示全文