理解成:把多个组件中共享的变量全部存储到一个对象里面,然后将这个对象放到顶层的vue实例中,这样多个组件就可以共享这个对象中的所有变量属性,类似于仓库,类似于前端数据库
其它语言中的单例模式,也正如这样的思想
为什么会产生了vuex?
一个对象如何被所有组件共享呢?
所有的组件都继承vue的一个原型,所以一旦给vue的原型上加上一个原型的话,那么所有的组件就都有了这个对象属性了,就可以拿到这个对象属性去调用它的属性和方法了
Vue.prototype.shareObj = shareObj
在main.js中引用了store,router,每个组件都可以拿到$store,$router,正是因为底层进行了这样的赋值Vue.prototype.$store = store,Vue.prototype.$router = router
但是我们自己封装的对象做不到响应式,属性值改变,界面上数据也变化,没法像data一样,能把属性放到vue的响应式系统中,所以官方提供了一个Vuex插件,就是专门来弥补自己封装对象做不到响应式缺陷的
实际开发中,什么东西要放vuex中呢,什么东西放到组件内部呢?
父组件中有一个状态属性,子组件中也想要用下这个状态,这种情况是没必要放到vuex的,使用组件间通信就可以了
需要放到vuex中的情景:
1.用户的登录状态,很多界面都需要用到,因为很多界面在去服务器请求数据的时候,都需要携带token令牌,有一些数据是需要登录的时候才能请求到,这个时候就需要在发送请求的参数里面携带token,如果没有token是请求不到数据的,这个时候就需要把用户登录成功后服务器给返回的token放到vuex中
2.用户名称,头像,地理位置信息
3.商品的收藏,购物车中的物品
4.设置界面
区分一下单界面状态管理和多界面状态管理?
单界面状态管理:只要自己的组件内部使用data和methods就可以了,自己内部数据的变化不影响其它页面
多界面状态管理:多个视图都依赖同一个状态,一个状态改变了,多个界面都会进行更新,不同界面的aciton都能修改某个状态
不同界面读取和修改都要安装规定好的格式
为什么是在mutations改变状态呢?
不是在actions中,vue为vuex的开发提供了一个浏览器插件Devtools,是装在浏览器端的,它可以跟踪记录哪个组件修改过得state状态,如果出问题了,可以方便查询哪个组件改错了
只要是修改state状态,一定是通过mutation去改的,这样Devtools才能帮助记录
为什么需要actions呢?
没有actions这一步也是可以的,官方文档中也是允许这样做的,当你在修改mutation的时候,如果有异步操作,不在直接在mutation中去操作,因为mutation中做的操作都是同步操作,一旦mutation与异步操作,Devtools是跟踪不到的,有异步操作先提交到action中去操作,再提交给mutation中,就变为同步操作了,因为异步操作在action中已经做完了。
使用action的场景:发送网络请求,这是异步操作,必须放到action中去操作