Vuex：是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex中的几大模块：State主要用于存数据；Getters用于数据的提取；Mutations是直接改变store仓库的状态且同步；Actions是可以进行任意异步操作，提交Mutations；Module则是将store模块化，对store对象进行解耦

一、State


         1、Vuex使用单一状态树，即一个对象包含了全部应用层级状态。每个应用
         包含一个store实例来作为唯一数据源SSOT。且单一状态和模块化不冲突。
         2、在Vue组件中获取vuex中的状态，需进行以下操作：
          1）创建store实例
          2)在main.js中，improt {store} from ‘./store/store’，在Vue
          对象上挂载store实例，new Vue ({store:store,…})
          3)在store.js中定义默认的state值，这个值会在初始化的时候使用。
          export const store = new Vuex.Store({
            state:{
              products:[
                {name:’a’,price:200},
                {name:’b’,price:140},
                {name:’c’,price:20},
                {name:’d’,price:10},
              ]
            }
          })
          4)在组件中获取vuex仓库的状态，通过vue的计算属性computed：
            export default {
              computed:{
                products(){ //ES6写法
                  return this.$store.state.products
                }
              }
            }
        3、state一般可以用作存数据。

二、Getters


         1、Getter用于派生出store中的state中的一些状态，且可以过滤、统计
         2、使用Getter对state中的状态进行计算，如下操作：
           1）在组件中类似于获取state状态，同样依靠于computed计算属性：
             export default {
               computed:{
                 saleProducts(){
                   return this.$store.getters.saleProducts
                 }
               }
             }
           2)在store仓库中编写getters中对应的计算方法：
           export const store = new Vuex.Store({
             getters:{
               saleProducts:(state)=>{
                 let data = state.products.map(e=>{
                   return {
                     name: e.name+’**’+’sale’,
                     price: e.price /2
                   }
                 })
                 return data; //计算属性，返回原状态的半价数据
               }
             }
           })

三、Mutations


         1、Mutations用于触发事件的形式直接改变store中的state状态
         2、Mutations是同步的不支持异步改变状态，使用方法如下：
           1）Vuex仓库中定义相应Mutations：
             export const store = new Vuex.Store({
             mutations:{
               //方法代表降价，数值为用户组件传入的amount字段。
               reducePrice:(state,payload)=>{
                 state.products.forEach(e=>{
                   e.price -= payload.amount;
                 })
               }
             }
           })
           2）在用户组件中通过绑定一个触发事件，调用Mutations中
           封装的方法，操作如下：
             < button @click=’reducePrice(5)’>降价</ button>
             //vue方法区域
             methods:{
               reducePrice(amount){ //以对象形式提交Mutations
                 this.$store.commit(‘reducePrice’,{amount})
               }
             }

四、Action


         1、Getter用于派生出store中的state中的一些状态，且可以过滤、统计
         1、Action可以进行任意异步操作，提交Mutations不直接改变状态。
         2、Action的提交依靠store.dispatch(),操作如下：
           1）Vuex的store中定义对应的action：
             export const store = new Vuex.Store({
               mutations:{//action提交的Multation
                 reducePrice:(state,payload)=>{
                   state.products.forEach(e=>{
                     e.price -= payload.amount;
                   })
                 }
               },
               actions:{ //可进行异步操作，状态改变时调用Multation
                 reducePrice:(state,payload)=>{
                   setTimeOut(()=>{
                     state.commit(‘reducePrice’,payload)
                   },3000)
                 }
               }
             })
           2）用户组件中，通过store.dispatch触发Action，再由Action处
           理异步操作，通过Action在状态改变时提交Multations。
             < button @click=’reducePrice(5)’>降低价格</ button>
             //vue中的方法区域
             methods:{
               reducePrice(amount){
                 this.$store.dispatch(‘reducePrice’,{amount,test:4})
               }
             }
           3)用户点击后，就会调用dispatch，触发对应action，处理异步操作
           并提交Multation。