是什么？

Vuex是实现组件数据（状态）管理的一种机制，可以方便的实现组件间数据共享。一般情况下，组件间需要共享的数据需要存储在VueX中，私有的数据还是存在当前组件的data中。

优点：

• 集中管理共享数据，易于开发和维护
• 存储在VueX中的数据都是响应式的，可以实现数据与页面同步

如何用？（一般流程）

• 安装VueX依赖包

    npm i vuex --save

• 导入VueX包

    import Vuex from 'Vuex'

• 创建store对象

const store = new Vue.Store({
   //store中存放的数据就是全局共享数据
    store:{}
})

• 将store对象挂载到vue实例中

    new Vue({
      render:h => h(app),
    router,
      store
}).$mount('#app')

VueX中的核心

state

State是唯一的公共数据源，所有共享的数据要放到Store的state中使用

• 组件访问全局数据的第一种方式

   this.$store.state.全局数据名称//注意：在组件中不要直接通过这种方法直接修改数据值！！！

• 组件访问全局数据的第二种方式

   //首先从Vuex中导入mapState 函数
   import {mapState} from 'Vuex'
   //然后将刚才导入的mapState函数，将当前组件需要用到的全局数据，映射为当前组件的computed属性
   computed:{
     ...mapState {"定义state的文件名",['全局数据名字']}
     }

Mutation

Mutation用于变更组件Store中的数据,这样做虽然操作复杂但是可以集中监控所有数据变化

使用步骤

• 定义Mutation

  ..............
  
  
   state: {
  },
  //定义mutation,注意通过mutation定义的函数不要是异步的操作！！
  mutations: {
    //处理函数，这里的state是上面定义的state对象 ，这里的data是传递的参数
    setLessons(state, data) {
      //要执行的操作
    },
    
    
  ..............

• （方法一）在需要的组件中调用Mutation定义的处理函数(两种调用方法)

   ...............
   
   
   methods:{
   handel (){
     //触发mutation的第一种方式,commit就是调用某个mutation定义的  处理函数，data是参数
     this.$store.commit('setLessons',data)
   }
   }
   
   
   ..................

• （方法二）在需要的组件中调用Mutation定义的处理函数

   //在组建中按需从Vuex中导入mapMutations函数（如果第一种导入方法可行那就不需要这样导入了）
   import { mapMutations } from "vuex";
   //将刚才导入的mapMutations函数，把Mutation定义的处理函数按需映射为当前的methods
   ..................
   
   
   methods: {
    ...mapMutations("定义mutation函数的文件名", [
      "处理函数1",
      "处理函数2",
      "处理函数3",
    ])}
    
    
   ...............

Action

Action专门处理异步操作任务;如果需要通过异步操作变更数据，必须通过Action；但是在Action中还是需要通过Mutation的方式间接变更数据。

使用步骤

• 第一种方式触发actions

   const store = new Vue.Store({
   store:{},
   mutations: {
       setLessons() {
         //要执行的操作
    },
   actions: {
   //异步的操作函数Asyncs
     Asyncs(context,形参){
       setTimeout(()=>{
       //通过commit提交mutation中定义的函数setLessons
           context.commit('setLessons' ，形参)
        }, 2000 )
       }
    }
})
//(方法一)在需要的组件中触发actions
  methods：{
    handle(){
    //第一种方式触发,通过dispatch提交action中的Asyncs函数
    this.$store.dispatch('Asyncs',实参)
    }
  }

• 第二种方式触发actions

   //首先在需要使用的组件中导入mapActions 函数
   import { mapActions } from "vuex";
   //将刚才导入的mapActions函数，将需要的actions定义的处理函数按需映射为当前组件的methods
   ........................
   
   
   methods: {
    ...mapActions("定义actions函数的文件名", [
      "处理函数1",
      "处理函数2",
      "处理函数3",
    ])}
    
  .................

Getter

• 用于对store中的数据进行加工处理形成新的数据，并不会更改store中的数据
• store中的数据发生变化，getter包装出来的数据也会跟着变化

使用步骤

//首先定义getter
   const store = new Vue.Store({
   store:{},
   mutations: {
       setLessons() {
         //要执行的操作
    },
   actions: {
     Asyncs(context,形参){
       setTimeout(()=>{
         ......
        }, 2000 )
       },
    //state是store中的数据
    getters:
    show (state) =>{
       return 封装后的数据
    }
    }
})


//【方法1】然后使用getter,例如：这里的名称为我们在getters中定义的show

this.$store.getters.名称
//【方法2】在需要的组件中导入mapGetters函数

import { mapGetters } from 'vuex'
//将需要用到的函数映射为当前组件的计算属性

computed:{
...mapGetters(['show'])
}

总结

• store中存放的数据是共享的数据，可供组件去使用
• 组件访问store中的数据两种方式；第一种，通过$store.state访问；第二种，从vuex中在组件上导入mapState，然后在compted中通过...语法将需要的数据映射为computed属性；在组件中直接用这个computed属性就行；
• mutation定义的函数可以用来改变state中的数据(不能在组件中直接用$store.state修改store中的值)
• 【触发调用】在组件的methods中通过$store.commit('mutation中定义的方法名')也可以借助mapMutations函数
• actions是用来Action专门处理异步操作任务;如果需要通过异步操作变更数据，必须通过Action；但是在Action中还是需要通过Mutation的方式间接变更数据。
• getter用来对store中的数据进行包装，具有响应式