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