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


相关文章
|
前端开发
Vue2向Vue3过度Vuex核心概念mutations
Vue2向Vue3过度Vuex核心概念mutations
119 0
|
1月前
|
JavaScript 前端开发 数据管理
vue2知识点:理解vuex、安装vuex、搭建vuex环境
vue2知识点:理解vuex、安装vuex、搭建vuex环境
29 0
|
3月前
|
存储 资源调度 JavaScript
学习使用Vuex
【8月更文挑战第5天】学习使用Vuex
49 5
|
4月前
|
存储 缓存 JavaScript
VUEX 的使用学习一
VUEX 的使用学习一
41 0
|
JavaScript
Vue Vuex 学习
Vue Vuex 学习
58 0
|
11月前
|
存储 JavaScript 前端开发
vuex入门
vuex入门
59 0
|
存储 JavaScript API
Vue之VueX知识探索(一起了解关于VueX的新世界)
Vue之VueX知识探索(一起了解关于VueX的新世界)
77 0
|
存储 JavaScript 安全
简介vuex和pinia
简介vuex和pinia
|
存储 缓存 JavaScript
vuex学习笔记
vuex学习笔记
86 0
|
JavaScript
5分钟上手使用vuex,vuex状态管理,vuex遇到的坑
5分钟上手使用vuex,vuex状态管理,vuex遇到的坑
194 0