vuex action异步缓存，实现数据缓存在state中，减少请求，提高性能

接上一篇
异步：用action做后端数据的缓存

使用步骤:

1. 在state中定义一个变量用来做状态管理
2. 取这个变量this.$store.state.xxxx
3. 通过this.$store.dispatch('getComingListAction')将异步请求dispatch 到action中
4. 到state.js 的actions 中进行异步请求
5. 将接口的数据提交到mutation中
6. 在mutation 中将提交来的值赋值给 store 中的变量（状态）

上代码
1.在state中定义一个变量用来做状态管理

  state: {
    comingList: [] 
  },

2.页面在 判断如果store 中的数据没有的话就 发ajax.有的话就 使用缓存的数据

mounted () {
   /*
       if(store中的list.length==0) {
           发ajaX请求
       }
       else {
           使用缓存数据
       }
       */
   if (this.$store.state.comingList.length === 0) {
     this.$store.dispatch('getComingListAction')
   } else {
     console.log('使用缓存数据')
   }
 }
}

通过 this.$store.dispatch(‘getComingListAction’)，将异步请求dispatch 到action中

3.由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
到state.js 的actions 中进行异步请求
Actions中的方法有两个默认参数

• store上下文(相当于箭头函数中的this)对象
• data 挂载参数

actions: {
    // 这里的store 是vuex 中自动给的参数
    getComingListAction (store) {
      axios({
        url: '',
        headers: {}
      }).then(res => {
        store.commit('comingListMutation', res.data.data.films)
      }).catch(err => {
        console.log(err)
      })
    }
  }

store.commit(‘comingListMutation’, res.data.data.films) 提交到 mutations 里面以后
4.在mutation 中将提交来的值赋值给 store 中的变量（状态）

 mutations: {
   comingListMutation (state, data) {
     state.comingList = data
   }
 },

5.页面中使用this.$store.state.comingList来接收数据进行遍历渲染

试试吧！！！