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！累死了，还需补充，暂时到这吧，如描述错误，欢迎下方留言，码字不易，如果看后觉得对您有所帮助，可随手来个攒，在此谢谢了！