5.5-VUEX

最新推荐文章于 2024-06-21 09:38:56 发布

晚安不熬夜了

最新推荐文章于 2024-06-21 09:38:56 发布

阅读量111

点赞数 1

分类专栏： vuex 文章标签： vue

本文链接：https://blog.csdn.net/cjjaixuexi/article/details/116429017

版权

vuex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

VUEX

简单了解

vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

使用vuex管理的好处

能够在vuex中集中管理共享的数据，便于爱发和后期进行维护；能够高效地实现组件之间的数据共享，提高开发效率；存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

什么情况下我应该使用 Vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡

如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

安装和配置

安装

npm install vuex

新建store文件夹

src目录下创建store目录，在里面新建index.js

index.js文件需要提供一个初始state对象和一些mutatio

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkZCUVfj-1620214158304)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192448281.png)]$

引入

为了在Vue组件中访问this.$store.property,你需要为Vue实例提供创建好的store,Vuex提供了一个从跟组件向所有子组件以store选项的方式注入该store的机制
修改main.js
- $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eIaT1Jqh-1620214158306)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192509976.png)]$

State

定义state

state提供唯一的公共数据源，所有共享的数据都要统一放到store中的state中存储；vuex中的state相当于组件中的data；
state中的数据与组件data中的数据一样，也是响应式的

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00mTbOeb-1620214158308)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192519362.png)]$

组件中使用state

模板中使用state

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGCt3qni-1620214158310)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192534541.png)]$
使用其方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ed8Qep2o-1620214158311)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192544247.png)]$
用计算属性改写
- $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oTgKYtLj-1620214158313)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192550099.png)]$
辅助函数
- 当一个组件需要获取多个状态的时候，将这些状态都声明为计算书属性会有些重复和冗余。为了解决这个问题，我们可以使用辅助函数帮助我们生成计算属性
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ChtMv7kY-1620214158313)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192559141.png)]$

更简单一些

- 属性名称是我们想要的计算属性名称；

属性值是使用的store中的属性名称

  ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CLJSbS4X-1620214158314)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192607037.png)\]](https://img-blog.csdnimg.cn/2021050519320064.png)

再简化一点
- 如果你的属性名称和属性值变量一样，就可以使用属性的简单表示法；name 属性的值来自于 store 中的 name 状态； price 属性的值来自于 store 中的 price 状态
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zO9naKDJ-1620214158315)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192617935.png)]$

mutation

mutations作用就是让组件可以通过mutations改变state中的值；Mutations 中必须是同步函数在想要操作store中state中的属性时不可以直接修改该属性，需要通过mutation进行修改

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txOMAEfm-1620214158315)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192644990.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gmImHmeX-1620214158316)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192651717.png)]$

getters

是对store中的一些属性做一些筛选或者过滤，语法和计算属性非常像；它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter 生成的内容也会随之变化

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-deVxabD9-1620214158316)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192740213.png)]$

组件中如何使用
- $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H2JPrKFz-1620214158317)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210505192746404.png)]$