Vuex的学习

1、 vuex的理解

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,
采用集中式存储管理应用的所有组件的状态,
以相应的规则保证状态以一种可预测的方式发生变化
通过vuex可以解决组件之间数据共享的问题,方便管理以及维护


2、 vuex的优点和缺点

优点:
1)解决了非父子组件的消息传递 
2)减少了AJAX请求次数 
3)数据方便管理以及维护
缺点:
1)小型项目使用vuex会显得繁琐冗余
2)刷新浏览器,vuex中的state会重新变为初始状态 


3、 使用 vuex的情况

1)当页面的组件比较多
2)业务比较复杂
3)数据难以维护


4、 vuex的原理

每个vuex应用的本质是store(仓库),包含应用中大部分的状态
state, getters,mutations,actions,module


5、vuex的用法

1)安装vuex
2)在src目录下创建store文件夹,在该文件夹内创建index.js
3)在index.js文件内引入vuex 
4)调用Vue.use()方法注册vuex
5)对vuex进行实例化,通过export default导出
6)在main.js文件内引入index.js文件
7)挂载到new Vue实例上面
8)初始化vuex的状态和属性

6 、项目中使用vuex的一些情况

登录模块,购物车模块,订单模块,商品模块


7、 vuex的运行机制

1)在vue组件里面,通过dispatch来触发actions提交修改数据
2)然后再通过actions的commit来触发mutations来修改数据
3)mutations接收到commit的请求,会自动通过Mutate来修改state里面的数据
4)最后由store触发每一个调用它的组件的更新


8、 vuex中的属性

State、Getter、Mutation 、Action、Module 五种
1)state:基本数据
2)getters:从基本数据派生的数据
3)mutations:提交更改数据的方法
4)actions: 像一个装饰器,包裹mutations,使之可以异步
5)modules:模块化Vuex


9、 获取state的值?调用gettes里面定义的方法?

调用mutations的方法?调用actions的方法?

 state的值获取的方式有两种:
第一种是组件里面进行获取 this.$store.state.状态
第二种是在vuex内部进行获取
函数参数里面会有一个state参数,通过这个state参数可以直接拿到state的值

 getters的方法在组件内调用的话是通过this.$store.getters进行获取,
作用是用来获取state的值

 mutations的方法在组件内调用时通过this.$store.commit()进行调用
作用是用来通过同步的方式去改变state里面状态, 

 actions的方法在组件内调用是通过this.$store.dispatch()进行调用,
作用是用来异步的改变状态,actions也支持promise


10、 vuex里面module属性的作用

1)module属性相当于是vuex里面的模块化方法
2)module属性可以让每一个模块拥有自己的state、mutation、action、getters
3)使得结构非常清晰,方便管理

  
11、 Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中

1)如果请求来的数据仅仅在请求的组件内使用,就不需要放入vuex 的state里
2)如果被其他地方复用就很需要,请求放入action里,方便复用并包装成promise返回,
在调用处用async await处理返回的数据
3)如果不要复用这个请求,可以直接写在vue文件里


12、Vuex中异步修改状态

1)actions去异步的改变state的状态, 调用actions内定义的方法,需要通过this.$store.dispatch()
2)mutations是同步改变状态,mutations方法是通过this.$store.commit()来进行调用,
3)actions通过commit来调用mutations的方法


13、 vuex中actions和mutations的区别

1)action提交的是mutation,而不是直接变更状态
2)action 可以包含任意异步操作
3)mutations只能是同步操作


14、 页面刷新后vuex的state数据丢失解决的方法

1)使用localStorage 或者sessionStorage
2)借用辅助插vuex-persistedstate


15、 vuex怎么知道state是通过mutation修改还是外部直接修改的

通过$watch监听mutation的commit函数中_committing是否为true

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北海屿鹿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值