什么是Vuex

1.Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态。
如果不使用Vuex，组件之间通过父子的props和自定义事件传递数据就会比较麻烦。Vuex的集中式存储意味着所有数据都可以放在Vuex仓库中，这意味着本来需要共享状态的更新是需要组件之间的通讯，而现在有了 Vuex，组件就都和 store 通讯了。
使用仓库Vuex，要先建立一个js文件(store.js)，在 文件中引入vue和vuex，然后进行实例化并导出，代码如下所示：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({......})

注：设置了之后还需要在入口js文件中引入该文件，并将其挂载到实例化的vue上面，然后就可以通过vue的vue.$store来使用仓库了

2.Vuex数据选项

在Vuex中，有4个关键的数据选项，分别是state、getters、mutations和actios，其中state表示仓库的状态，即是仓库所有的数据，getters表示获取仓库数据的方法，并且 可以对仓库里面的数据进行二次处理后再获取，mutations表示对仓库里面的数据进行同步修改，actions表示对仓库里面的数据进行异步修改，但action实际上也可以直接调用mutation中的方法进行修改。其中state中是书写对象，而getters、mutations和actios中是书写方法
如下代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    list: [
        { name : "苹果",price: 3 },
        { name : "西瓜",price: 4 },
        { name : "香蕉",price: 5 },
    ]
  },
  getters: {
    getList(state) {
      return state.list.map(item => {
        return {
          name: item.name,
          age: item.price* 0.8
        }
      });
    }
  },
  mutations: {
	changPrice(state,price ){
		state.list.forEach(item => {
          item.price = price 
      });
	}
  },
  actions: {
	changPriceAction(state, price ){
	    setTimeout(function () {
	   		state.list.forEach(item => {
            item.price = price 
         });
        });
      }, 3000);
	}
  }
})

说明：上述示例代码中，getter中的getList方法表示获取state数据，并进行了二次处理(价格打了八折)，但是仓库中的数据state是没有发生改变的，其中getter中的方法自动穿了一个参数state，表示的是仓库里面所有的数据。mutations中的changPrice方法传入了两个参数，第一个参数和getter参数一样，表示所有state数据，第二个参数是调用该方法时所传入的参数，该方法的目的是将价格改变为传进来的价格。actions中changPriceAction的方法中，参数和功能都和mutations中的changPrice方法的一样，唯一不同的是，此方法是在3000ms之后才执行价格更改，是一个异步操作。