vuex
- 1.vuex是什么?怎么使用?哪种功能场景使用它?
- 2.vuex有哪几种属性?
- 3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
- 4.Vuex解决了什么问题?
- 5.Vuex中状态储存在哪里,怎么改变它?
- 6.Vuex中状态是对象时,使用时要注意什么?
- 7.怎么在组件中批量使用Vuex的state状态?
- 为什么要`store.commit('add')`才能触发事件执行呢?可不可以进行直接调用mutation函数进行操作呢?
- 为什么不可以直接对state存储的状态进行修改,只能通过调用函数的方法修改呢?
- 为什么存在一步调用的函数需要`stroe.dispatch('asyncAdd')`函数才能完成呢?可以直接调用`store.commit('asyncAdd')`嘛?如果不可以,为什么呢?
- createStore()和userStore()到底发生了什么?
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/872f5bdd7c1d82802833db8bf928a628.png)
1.vuex是什么?怎么使用?哪种功能场景使用它?
答:vue框架中状态管理。在main.js引入store,注入。
新建了一个目录store.js,…… export 。
场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
2.vuex有哪几种属性?
答:有五种,分别是 State、 Getter、Mutation 、Action、 Module
state
=> 基本数据(数据源存放地)
getters
=> 从基本数据派生出来的数据
mutations
=> 提交更改数据的方法,同步!
actions
=> 像一个装饰器,包裹mutations,使之可以异步。
modules
=> 模块化Vuex
3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
- 如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
- 如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便
4.Vuex解决了什么问题?
答: 多个组件依赖于同一状态时, 来自不同组件的行为需要变更同一状态。
5.Vuex中状态储存在哪里,怎么改变它?
答:存储在state中,改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。
6.Vuex中状态是对象时,使用时要注意什么?
答:需要先用深度克隆复制对象,再修改。因为对象是引用类型,复制后改变属性还是会影响原始数据,这样会改变state里面的状态,是不允许
7.怎么在组件中批量使用Vuex的state状态?
答:使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中
import {mapState} from 'vuex'
export default{
computed:{
...mapState(['price','number']) ,
// 推荐写法如下:
//...mapState({
// DbSource: state => state.DbSource,
// phoneMap: state => state.richCommunicationSuite.phoneMap, // 模块化写法
//})
}
}
//methods中调用:this.price()
为什么要store.commit('add')
才能触发事件执行呢?可不可以进行直接调用mutation函数进行操作呢?
解答:stroe类里根本没有mutation方法,只能通过调用commit方法来执行mutation里的函数列表
为什么不可以直接对state存储的状态进行修改,只能通过调用函数的方法修改呢?
解答:vuex通过强制限制对store的修改方式来确保状态的可追踪性。只有通过mutation函数才能修改store中的状态,这样可以轻松的跟踪状态的变化,也可以避免无意中从不同的组件中直接修改stroe导致的代码难以维护和调式的问题
为什么存在一步调用的函数需要stroe.dispatch('asyncAdd')
函数才能完成呢?可以直接调用store.commit('asyncAdd')
嘛?如果不可以,为什么呢?
解答:实际上dispatch方法和commit方法远不止这么简单,在源码中,dispatch方法返回的是一个promise对象,而commit方法没有返回值,完全进行的是同步代码的操作,虽然返回值肯呢个适用的场景不多,但是这样设计的主要母的还是为了确保状态的可追踪性
createStore()和userStore()到底发生了什么?
当我们去调用createStore()函数,其构造函数就会接收一个包含stae、mutation、action和getters函数的对象options,然后将他们保存到实例属性中,从此state中的值都会转换为响应式对象,同时遍历所有getters函数,将其封装成computed属性并保存到实例属性getters中,而在main.js里调用了app.use(),install()方法自动执行,将将当前store实例注册到vue.js应用程序中,只需要调用useStore()就可以拿到全局状态管理的store实例了,可以靠inject和provide实现全局共享