Vuex深入解读(适用于Vue2)

Vuex深入解读(适用于Vue2),第1张

Vuex是Vue官方推出的 一个 状态管理工具,其能生成一个单独的全局状态实例,其有以下特点:

注意事项 :版本号在362以下的vuex适用于vue2,若在vue2的工程项目中直接 npm i vuex -s 会报如下的错误

解决办法是指定版本号,vue2使用的版本目前最高支持到362,具体可在 更新记录 中进行查阅。

State相对于vuex来说就好比vue组件中的data,所以声明state必须是 纯粹的对象 (含有零个或多个的 key/value 对) ,在建立后,State数据会被转换为响应式的数据。

首先定义一个store,里面只包含State,然后我们将其注入到全局,下面一次进行以上三种形式的测试

1在vue组件中访问

注:由于不能修改store数据,所以一般不建议在data中访问store的数据,因为它没有缓存效果,一般在计算属性中获取state数据。

mapState 语法糖的主要作用是将store中的state映射到当前vue实例的computed中

在没有 mapState 时,我们获取state一般在computed中进行获取,对于获取多个state数据,那么我们就要写多个computed方法,如下

针对于写多个computed的繁琐和冗余,使用 mapState 可以帮助我们生成 计算属性 。

当映射的计算属性的名称与 state 的数据名称相同时,我们也可以给 mapState 传一个字符串数组。

mapState 返回的是一个对象,如果computed只包括 mapState ,那么直接写

如果你的computed还有其它store之外的属性,那么你需要使用剩余运算符,把mapState返回的对象和其它计算属性对象合并

不会。vuex中watch的使用,在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex,是store模块文件写相关的数据信息。vuex是一个专门为vue,js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

以上就是关于Vuex深入解读(适用于Vue2)全部的内容,包括:Vuex深入解读(适用于Vue2)、vue中路由里会去获取vuex中数据吗、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9380237.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存