Vuex的学习笔记一：认识Vuex和引入

Bertha 。 2022-12-27 01:57 240阅读 0赞

再次学习Vuex并记录下来，方便日后的复习和理解！！！

#### 1.先看组件之间共享数据的方式又哪些 ####

父向子传值：  
父组件通过v-bind属性绑定，子组件props接收

子向父传值：  
子组件通过$emit传值，父组件通过v-on事件绑定接收

兄弟组件传值：  
EventBus ， $on 接收数据的组件 / $emit 发送数据的组件

以上方法虽然可以解决一些组件之间的数据共享，小范围组件之间还可以，一旦涉及到多人开发的大项目和大范围组件之间数据共享就不太方便，所以我们就不得不再认识个新朋友（Vuex）来帮助我们。

#### 2.Vuex是什么？为什么要认识它？ ####

[Vuex][]是实现组件全局状态（数据）管理的一种机制，可以方便实现组件数据之间的共享；

[Vuex][]的好处：

1.  集中管理共享的数据，易于开发和后期维护；
2.  能够高效的实现组件之间的数据共享，提高开发效率；
3.  存储在Vuex的数据是响应式的，能够实时保持页面和数据的同步；

看下图对比项目中不使用Vuex共享数据和使用Vuex的区别：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]  
从上图中可以看到，不使用Vuex的项目，通过父子和兄弟之间传值实在太麻烦，看着眼都花了，更何况还要用代码来实现，肯定不好开发和维护；再看看使用Vuex的项目，只需要把组件需要共享的数据保存到Vuex中，别的组件需要可以直接获取，不需要第三方中介，一目了然，便于开发和维护；

#### 3.Vuex的基本使用 ####

###### 安装Vuex依赖包 ######

npm install vuex --save

###### 导入包 ######

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)

###### 创建store对象 ######

const store = new Vuex.Store({
      state: {
      },
      mutations: {
      }，
      actions：{
      }，
       getters: {
      }
    })

###### 将store对象挂载到vue的实例中 ######

new Vue({
      el: '#app',
      render: h => h(app),
      router,
      //将创建的共享数据对象挂载到vue的实例中，所有的组件就可以直接从store中获取全局的数据了
      store
    })

这样一个项目就成功引入了vuex了，后面我们再一起学习怎么在项目中使用Vuex来进行组件间数据的获取和修改！

[Vuex]: https://vuex.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/de143508a80b4a2ea4046473a02d5661.png