Actions

根據流程圖得知，actions是接受後端api的，進行非同步請求，獲取到的資料 要通過commit提交給mutation，mutation才能修改state中的資料，

案例： 請求賣座的api 通過action

1，首先先判斷頁面是否擁有資料，沒有的話，使用action進行非同步請求

if(this.$store.state.cinemaList.length === 0 ){
      //vuex 非同步
      this.$store.dispatch('getCinemaList',this.$store.state.cityId)

dispatch是流程圖中，元件內提交給action的方法

括號傳，定義的方法，和需要傳的值

2.在store檔案中

actions: {
    getCinemaList(store,cityId){
      return http({
        url: `https://m.maizuo.com/gatewaycityId=${cityId}&ticketFlag=1&k=7668767`,
        headers: {
          "X-Host": "mall.film-ticket.cinema.list",
        },
      })

return:是因為是promise物件

括號，一個是store自身的形參，傳的值

3，

 //非同步
  actions: {
    getCinemaList(store,cityId){
      return http({
        url: `https://m.maizuo.com/gateway?cityId=${cityId}&ticketFlag=1&k=7668767`,
        headers: {
          "X-Host": "mall.film-ticket.cinema.list",
        },
      }).then((res) => {
        // console.log(res.data);
        store.commit('setCinemaList',res.data.data.cinemas)
      });
    }
  },
 

根據流程圖，將請求的資料給mutation，通過commit方法

4，在mutation中，修改state中cinema的資料

 setCinemaList(stata,cinemaList){
      stata.cinemaList = cinemaList
    }

這樣就完成了一次Vuex的非同步操作