vuex

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;