前端总结-Vuex

一、什么是Vuex

1. 组件间共享数据的方式

• 小范围数据共享
  • 父向子传值：v-bind属性绑定
  • 子向父串值：v-on 事件绑定
  • 兄弟组件之间共享数据：EventBus
    • $on 接收数据的那个组件
    • $emit 发送数据的那个组件
• 大范围数据共享
  • Vuex

2. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
3. Vuex是实现组件全局转态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
4. 使用Vuex统一管理状态的好处:
   • 能够在vuex中集中管理共享的数据，易于开发和后期维护。
   • 能够高效地实现组件之间的数据共享，提高开发效率。
   • 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
5. 什么样的数据适合存储到 Vuex 中
   • 一般只有组件间共享的数据，才有必要存储到vuex中；
   • 对于组件中私有的数据，依旧存储在组件自身的data中。

二、vuex的基本使用

1. 安装vuex依赖包:

• npm install vuex --save

2. 导入vuex包

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

3. 创建store对象

   const store = new Vuex.Store({
       <!--state中存放的就是全局共享的数据-->
       state:{ count:0 }
   })
   

4. 将store对象挂载到 vue 实例中

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

三、Vuex的核心概念

• state提供唯一的公共资源，所有共享的数据都要统一放到Store中进行存储。

  //创建store数据源，提供唯一公共资源
  const store = new Vuex.store({
      state:{ count:0 }
  })
  

• 组件访问State中数据的第一种方式： this.$store.state.全局数据名称

• 组件访问State中数据的第二种方式：

  //1.从vuex 中按需导入mapState函数
  import { mapState } from 'vuex'
  

• 通过刚才导入的mapState函数，将当前组件需要的全局函数，映射为当前组件的computed计算属性：

  //2.将全局数据，映射为当前组件的计算属性
  computed:{
      ...mapState(['count'])
  }
  

• Mutation
  • Mutation用于变更Store中的数据
  • 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
  • 操作繁琐，但是可以集中监控所有数据的变化