vuex官方示意图
整个流程：首先确保是否有异步请求或者异步操作在整个vuex的流程中，如果有就在
actions里面进行操作，在操作之前需要发一条消息（this.$store.dispatch(' ')）给actions用于接收。接收之后发起请求或者异步操作，然后再commit一条消息给mutations，用于修改state里面的数据（store.commit(' ',data)）。
以下是一个完整的栗子。比如在项目中有一个推荐的列表，可以来回的切换，但不需要每次在切换的时候都要去请求一次数据，这样会浪费请求的事件还要多次更新html，所以就利用vuex来完成。
首先在项目下新建一个store文件夹，分别引入vue和vuex，以及在vue中注册vuex
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
接着写入以下内容
const store=new Vuex.Store({
state:{
},
actions:{ //在这里处理异步请求（也可以处理同步请求），但是改变状态还是需要在mutations里面进行修改，所以需要commit
},
mutations:{//在这里处理同步请求，改变state里面的数据，不能异步（比如加定时器）
}
})
export default store;
然后在main.js中引入并且注册到vue中。
import Vue from 'vue'
import App from './App'
import router from './router'
import store from '../store/index';
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
而我们的项目需要正如上面所说，不需要来回的请求数据，所以我们在页面中就需要这么一段if判断。
if(this.$store.state.recommendList.length===0&&this.$store.state.bannerImg){
//我们需要判断store里面state的recommendList和bannerImg是否有值，如果没有的话我们就需要dispatch一条消息给actions，告诉actions需要请求。
this.$store.dispatch('getRecommendList')
}
然后来到store下面的index.js中
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
const store=new Vuex.Store({
state:{
recommendList:[],
bannerImg:[]
},
actions:{ //在这里处理异步请求（也可以处理同步请求），但是改变状态还是需要在mutations里面进行修改，所以需要commit
getRecommendList:function(store){
axios.get('/v2/page',{
params:{
pageId:1,
tabId:1,
currentPage:1,
pageSize:8,
_:1556056259410
}
}).then(res=>{
let length=res.data.data.modules.length;
//在actions里面并不能修改state 所以需要commit一条消息给mutations，让mutations里面的函数来修改掉状态。
store.commit('setRecommendList',res.data.data.modules.slice(1,length))
store.commit('setRecommendBannerImg',res.data.data.modules[0].moduleContent.banners)
})
}
},
mutations:{//在这里处理同步请求，改变state里面的数据，不能异步（比如加定时器）
setRecommendList:function(state,payLoad){
state.recommendList=payLoad;
},
setRecommendBannerImg:function(state,payLoad){
state.bannerImg=payLoad;
}
}
})
export default store;
