Vuex使用
Vuex使用总结
文章由来
结合官网+黑马Vuex视频,对Vuex做一个自我总结,暂时还在学习中,今天暂时没有心思继续学习,所以不打算在这种状态下继续学习,怕吸收不了,最终导致效果不行,所以写写博客把掌握的给记下来。
Vuex用途
- 用于兄弟组件传值。
- 状态管理
- 数据仓库
以上都是是对Vuex用途的理解。
组件传值方式
Vue传值的方式,我目前掌握的方式有两种:
- 第一种是父子组件传值,关键字是prop。这里又分为父组件向子组件传值;子组件向父组件传值。
- 第二种是兄弟组件传值(相邻组件之间的传值)。
父组件如何向子组件传值
- 通过标签的形式,也就是在组件标签中通过v-bind的方式定义一个变量向子组件传值,子组件页面的实例对象中定义一个props对象用来接收父组件定义的变量。
子组件如何向父组件传值
- 通过事件的形式,也就是子组件中通过$emit(event,args)方式,定义一个方法进行值的传递,父组件在methods中通过监听子组件中定义的方法从而拿到子组件中传过来的值。
父子组件传值图片展示
需求:count值为公用的值,改变下面任意一个组件中的count,其他组件的count都回发生改变。
此时通过父子组件可以做到这个需求,侄子组件向叔叔组件传值则十分麻烦,传值顺序为:侄子》伯伯》爷爷》叔叔。
这个时候,Vuex出场了。
Vuex核心
- state
- mutation
- action
- Getter
个人理解:Vuex相当于一个数据仓库store,它的所有数据对象保存在state这个对象中,当需要对数据进行改变的时候,则需要在mutation这个对象中声明方法来对state数据进行操作。
需求:count值为公用的值,改变下面任意一个组件中的count,其他组件的count都回发生改变。
此时则可以在store中的state对象中声明一个count对象。然后在mutation中声明一个操作count对象的方法。当vue实例中挂载完这个store对象后,则可以通过$的形式来调用store对象中的任何东西。所以上面所有组件中的count值,则可以通过直接调用store对象中的count值进行页面渲染。当以上组件中,任意一个组件改变count值,都是通过调用store仓库中mutation对象中的方法来对count值进行操作的。
个人理解:类比于数据库,所有页面中的数据都是从数据库中查出来进行展示的,当数据库中的数据发生改变时,所有页面的数据都会发生改变。
~~oh my god!累死了,还需补充,暂时到这吧,如描述错误,欢迎下方留言,码字不易,如果看后觉得对您有所帮助,可随手来个攒,在此谢谢了!