vuex的五部分使用

第一部分 ： modules 的使用

1,引入用  modules 外的文件

import mdA from './moduleA/index'

然后 在 store 中使用 这样就相当于 将 mdA 模块的 state  getters actions mutations 做一个独立的 模块

let store = new Vuex.Store({
    modules:{
        mdA
    }）

这是   moduleA/index

import {instance} from "@/utils/http"
const mdA = {
    namespaced:true,  //开启匿名空间
    state :{
        cinemaList:[]
    },
    //也可以写成别的形式
    // state:()=>({}),
    // state:()=>{return{}}
       //存放计算属性
       getters:{
        getCinemaList(state){ 
        return state.cinemaList.slice(0,5)
      },
    },
    //异步请求数据
    actions:{
        // async getCinemaListAction(context){
        //     let res = await instance("/gateway?cityId=310100&ticketFlag=1&k=5979448",{
        //         headers:{
        //             'X-Host': 'mall.film-ticket.cinema.list'
        //         }
        //     })
        //    context.commit("setCinemaList",res.data.data.cinemas)
        // }
         getCinemaListAction(context){
           instance("/gateway?cityId=310100&ticketFlag=1&k=5979448",{
                headers:{
                    'X-Host': 'mall.film-ticket.cinema.list'
                }
            }).then(res=>{
                context.commit("setCinemaList",res.data.data.cinemas)
            })
           
        }
        
    },
    //同步请求
    mutations:{
        setCinemaList(state,cinemas){
            state.cinemaList = cinemas
        }
    }

}

export default mdA

然后这是 store/index.js 里面的

import Vue from 'vue'
import Vuex from 'vuex'
// import {instance} from "@/utils/http"
import mdA from './moduleA/index'
Vue.use(Vuex)

let store = new Vuex.Store({
    modules:{
        mdA
    },
    state:{
        isTabShow:true,
        //cinemaList:''
    },
    // //存放计算属性
    // getters:{
    //     getCinemaList(state){ 
    //     return state.cinemaList.slice(0,5)
    //   },
    // },
    // //异步请求数据
    // actions:{
    //     // async getCinemaListAction(context){
    //     //     let res = await instance("/gateway?cityId=310100&ticketFlag=1&k=5979448",{
    //     //         headers:{
    //     //             'X-Host': 'mall.film-ticket.cinema.list'
    //     //         }
    //     //     })
    //     //    context.commit("setCinemaList",res.data.data.cinemas)
    //     // }
    //      getCinemaListAction(context){
    //        instance("/gateway?cityId=310100&ticketFlag=1&k=5979448",{
    //             headers:{
    //                 'X-Host': 'mall.film-ticket.cinema.list'
    //             }
    //         }).then(res=>{
    //             context.commit("setCinemaList",res.data.data.cinemas)
    //         })
           
    //     }
        
    // },
    // //同步请求
    mutations:{
        show(state){
            state.isTabShow = true
        },
        hide(state){
            state.isTabShow = false
        },
        // setCinemaList(state,cinemas){
        //     state.cinemaList = cinemas
        // }
    }
})

export default store

 

 

第二部分 就是具体使用部分

直接可以使用 mdA 中的 state 和 getters  不过这两个辅助函数需要在  computed 计算函数中使用  为了 将  

this.$store.state.cinemaList  简写为

'cinemaList'  当然  getters 里面的数据也是为了可以简写

computed:{
      ...mapState('mdA',['cinemaList']),  //可以得到store里面是state状态 this.$store.state.cinemaList 可以简写为 this.cinemaList
      // ...mapState({
      //   abc:state=>state.cinemaList
      // }) , //这样的话 this.$store.state.cinemaList 就可以用abc代替
     // ...mapGetters(['getCinemaList']), //引入计算属性
      //计算属性重命名
      ...mapGetters({
        abc:'mdA/getCinemaList'
      }),
      // getCinemaList(){    //可以将其放入vuex中 store里面  调用的时候使用  this.$store.getters.getCinemaList
      //   return this.$store.state.cinemaList.slice(0,5)
      // },
}

 

剩下的就是  mapActions 和  mapMutions  这两个是一个 异步函数  一个 同步函数  主要是为了 简化函数的调用  不需要了  commit 和dispatch  的使用

   methods:{
      ...mapActions('mdA',['getCinemaListAction']), //可以直接获得 vuex中的 module 中 mdA的 actions getCinemaListAction 方法
       btn(){
          //  console.log(this.$store.dispatch)
          this.getCinemaListAction()
          // vuex中的数据是存在内存里面的，如果要是刷新之后，便会回到初始值
       },
       back(){
          this.$router.back()

       }
    }