Vuex的学习

简介: 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的方法?

调用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


相关文章
|
7月前
|
存储 JavaScript 开发者
Pinia和Vuex的区别
Pinia和Vuex的区别
1772 0
|
2月前
|
存储 JavaScript API
Vuex 和 Pinia 的区别
【10月更文挑战第18天】Vuex 和 Pinia 都有各自的优势和适用场景。Vuex 适合较为大型和复杂的项目,强调严格的架构和流程;而 Pinia 则更适合中小型项目以及对灵活性和简洁性有更高要求的开发者。你可以根据项目的具体需求和个人喜好来选择使用哪一个状态管理库。
638 59
|
2月前
|
JavaScript 前端开发 数据管理
vue2知识点:理解vuex、安装vuex、搭建vuex环境
vue2知识点:理解vuex、安装vuex、搭建vuex环境
42 0
|
4月前
|
存储 资源调度 JavaScript
学习使用Vuex
【8月更文挑战第5天】学习使用Vuex
51 5
|
5月前
|
存储 缓存 JavaScript
VUEX 的使用学习一
VUEX 的使用学习一
46 0
|
7月前
|
存储 JavaScript
vuex和pinia区别
vuex和pinia区别
457 0
|
存储 资源调度 JavaScript
Vuex详解,详细讲解一下Vuex
Vuex详解,详细讲解一下Vuex
221 0
|
7月前
(学习笔记)抛弃 Vuex,使用 Pinia
(学习笔记)抛弃 Vuex,使用 Pinia
71 1
|
存储 JavaScript 前端开发
vuex入门
vuex入门
65 0
|
存储 JavaScript 安全
简介vuex和pinia
简介vuex和pinia