VueX

1.什么是VueX？

vuex是专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex是管理vue状态（数据）的一个库，任何组件都可以和store通信，是单一数据源

2.VueX与全局对象的区别

• 每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state).
• vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。
• 不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

3.VueX的基本使用

• state：存放store的各种状态(数据)，类似于data                                                              在组件中如何获取：computed中返回相应的数据 / mapState辅助函数

• mutation：改变store的状态只能通过mutation方法，纯函数(多次调用，返回结果一样)、同步函数 

  mutations:{
     increment(state){
        state.count++      
    }
  }
  
  //某组件在方法中提交mutation
  methods:{
      addition(){
         this.$store.commit('increment', **)
     } 
  }
  

• action：异步操作方法，类似于mutation不同在于action提交的式mutation，而不是直接改变状态

  actions:{
      aupdataInfo(context){
          setTimeout(()=>{
              context.commit('updataInfo')
          },1000)
      }
  }
  
  methods:{
      updataInfo(){
          同步操作，写法：this.$store.commit('mutations方法名',值)
          this.$store.dispatch('aupdataInfo') 
      }
  }
  

• getters: 基于当前state的值进行计算返回新的值，类似于computed计算属性

  getters:{
      powerCount(state){
         return state.count + state.num
      }
  }
  
  //组件中直接获取: $store.getters.powerCount
  

• module的使用

  module:{
      A:modulesA
  }
  const modulesA = {
      state:{
         name:'zhangsan'
      }
      mutations:{},
      getters:{}
  }
  

4.在组件内如何与VueX进行通信

• 与state通信：this.$store.state.变量名
• 与getters通信：this.$store.getters.变量名
• 调用mutation：this.$store.commit('函数名'，参数)
• 调用actions：this.$store.dispatch('函数名’，参数)