• Vuex：辅助函数：mapState，mapMutations，mapActions，mapGetters

    说明

    Vuex中提供了四个个比较常用的辅助函数：目的是将vuex中对应的 state(),mutaiions{},actions{},getters{}中的数据，函数映射出去，让我们在组件中可以更加简单的使用这些数据与函数

    1. mapState
    2. mapMutations
    3. mapActions
    4. mapGetters

    使用案列

    /src/store/index.js状态管理器

    1. import axios, { Axios } from 'axios';
    2. import { CHANGE_APPISSHOW } from './type.js'
    3. import { createStore } from 'vuex'
    4.  
    5. const store = createStore({
    6.     state() {
    7.         return {
    8.             appIsShow: true,
    9.             datalist: [],
    10.         }
    11.     },
    12.  
    13.     //同步
    14.     mutations: {
    15.         //参数state：是vuex自动给我们注入进来的。我们调用的时候不需要传递这个参数，直接传递第二个参数boolParams即可
    16.         //参数boolParams: 是我们定义的参数,用户在发起调用的时候自己传入
    17.         changeAppIsShow(state, boolParams) {
    18.             state.appIsShow = boolParams;
    19.         },
    20.         dataListInit(state, arrParams) {
    21.             state.datalist = arrParams;
    22.         }
    23.     },
    24.  
    25.     //异步+同步：action不能直接修改state()中的数据，它是也是向mutations提交数据来修改的。
    26.     actions: {
    27.         async getDataList(store) {
    28.             //异步
    29.             const result = await axios({
    30.                 url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3777796",
    31.                 headers: {
    32.                     'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257","bc":"110100"}',
    33.                     'X-Host': 'mall.film-ticket.cinema.list'
    34.                 }
    35.             });
    36.             console.log("获取数据")
    37.             //同步：向mutations提交数据：触发dataListInit函数，并向函数传递了一个数组参数
    38.             store.commit("dataListInit", result.data.data.cinemas);
    39.         }
    40.     },
    41.  
    42.     //getters:就相当于vue的计算属性。为什么vue有computed计算属性了，这里还要搞一个getters呢？那是因为架构师想尽可能的把数据的处理过程放到vuex中，vue就作为一个展示数据的地方，实现纯粹的业务，数据分离
    43.     //getters:的函数传递参数需要放到匿名函数中来做
    44.     getters: {
    45.         filterDataList(state) { //这个state就是state()中的数据
    46.             return (intParams) => { //这个intParams就是触发filterDataList这个函数的调用方(我们自己)传递的
    47.                 // return state.datalist.filter(item => {
    48.                 //     return item.eTicketFlag === 0
    49.                 // })
    50.                 
    51.                 //注意上面注释代码中匿名函数item=>{return item.eTicketFlag === 0} :加了{}就需要在里面多一个return
    52.  
    53.                 return state.datalist.filter(item =>item.eTicketFlag==intParams)
    54.             }
    55.         }
    56.     }
    57. });
    58.  
    59. export default store

    main.js 注册状态管理器

    1. import { createApp } from 'vue'
    2. import './style.css'
    3. import App from './App.vue'
    4.  
    5. //import store from "../src/store" //状态管理器js          注意：如果仅仅是指定了一个文件夹router，程序会自动去router文件夹下寻找index.js，并导入
    6. //import store from "../src/store/index" //导入状态管理器js    注意：.js可以省略
    7. //import store from "../src/store/myindex.js" //导入状态管理器js  注意：如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了
    8.  
    9. import store from "../src/store/index.js" //导入状态管理器js 
    10.  
    11.  
    12. var app=createApp(App)
    13.  
    14. app.use(store)  //注册vuex插件：状态管理器
    15.  
    16. app.mount("#app")
    17.

    组件中使用

    1. <template>
    2.     <select v-model.number="type">
    3.         <option :value="0">App订票option> 
    4.         <option :value="1">前台兑换option>
    5.     select>
    6.     <div>
    7.         <ul>
    8.             
    9.             
    10.  
    11.             
    12.             <li v-for="item in filterDataList(type)" :key="item.cinemaId">{{ item.name }}li>
    13.  
    14.         ul>
    15.     div>
    16. template>
    17. <script>
    18. import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
    19. export default {
    20.     //钩子函数
    21.     mounted() {
    22.         //this.$store.commit("changeAppIsShow", false)代码采用辅助函数的写法：
    23.         this.changeAppIsShow(false) //它其实就是...mapMutations(["changeAppIsShow", "dataListInit"]) 中展开的changeAppIsShow方法。
    24.  
    25.         console.log("aa",this.appIsShow);//输出：false;
    26.  
    27.         // if (this.$store.state.datalist.length === 0) {
    28.         if (this.datalist.length === 0) {
    29.             //如果数据为空，则去触发actions的中的getDataList方法，达到获取datalist数据的目的。而this.$store.state.datalist中的数据存在内容中，其他地方需要这个数据直接从内存中取，相当于有个缓存，
    30.  
    31.             //this.$store.dispatch("getDataList");代码改成如下辅助函数的写法
    32.             this.getDataList(); //它其实就是...mapActions(["getDataList"]) 中展开的getDataList方法
    33.         }
    34.  
    35.     },
    36.     beforeUnmount() {
    37.         //this.$store.commit("changeAppIsShow",false)代码采用辅助函数的写法：
    38.         this.changeAppIsShow(false) //它其实就是...mapMutations(["changeAppIsShow", "dataListInit"]) 中展开的changeAppIsShow方法。
    39.  
    40.     },
    41.     //数据
    42.     data() {
    43.         return {
    44.             type: 0,
    45.         }
    46.     },
    47.     //方法:vuex中的Mutations，与Actions 放到methods中进行展开
    48.     methods: {
    49.         ...mapMutations(["changeAppIsShow", "dataListInit"]), //将store中的Mutations函数展开，在DOM中可以直接用：如changeAppIsShow(),dataListInit() 在