Vuex：辅助函数：mapState，mapMutations，mapActions，mapGetters ：VOA模式

本文链接：https://blog.csdn.net/fanbin168/article/details/134340474

说明

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

mapState
mapMutations
mapActions
mapGetters

使用案列

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

import axios, { Axios } from 'axios';
import { CHANGE_APPISSHOW } from './type.js'
import { createStore } from 'vuex'

const store = createStore({
    state() {
        return {
            appIsShow: true,
            datalist: [],
        }
    },

    //同步
    mutations: {
        //参数state：是vuex自动给我们注入进来的。我们调用的时候不需要传递这个参数，直接传递第二个参数boolParams即可
        //参数boolParams: 是我们定义的参数,用户在发起调用的时候自己传入
        changeAppIsShow(state, boolParams) {
            state.appIsShow = boolParams;
        },
        dataListInit(state, arrParams) {
            state.datalist = arrParams;
        }
    },

    //异步+同步：action不能直接修改state()中的数据，它是也是向mutations提交数据来修改的。
    actions: {
        async getDataList(store) {
            //异步
            const result = await axios({
                url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3777796",
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257","bc":"110100"}',
                    'X-Host': 'mall.film-ticket.cinema.list'
                }
            });
            console.log("获取数据")
            //同步：向mutations提交数据：触发dataListInit函数，并向函数传递了一个数组参数
            store.commit("dataListInit", result.data.data.cinemas);
        }
    },

    //getters:就相当于vue的计算属性。为什么vue有computed计算属性了，这里还要搞一个getters呢？那是因为架构师想尽可能的把数据的处理过程放到vuex中，vue就作为一个展示数据的地方，实现纯粹的业务，数据分离
    //getters:的函数传递参数需要放到匿名函数中来做
    getters: {
        filterDataList(state) { //这个state就是state()中的数据
            return (intParams) => { //这个intParams就是触发filterDataList这个函数的调用方(我们自己)传递的
                // return state.datalist.filter(item => {
                //     return item.eTicketFlag === 0
                // })
                
                //注意上面注释代码中匿名函数item=>{return item.eTicketFlag === 0} :加了{}就需要在里面多一个return

                return state.datalist.filter(item =>item.eTicketFlag==intParams)
            }
        }
    }
});

export default store

main.js 注册状态管理器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//import store from "../src/store" //状态管理器js          注意：如果仅仅是指定了一个文件夹router，程序会自动去router文件夹下寻找index.js，并导入
//import store from "../src/store/index" //导入状态管理器js    注意：.js可以省略
//import store from "../src/store/myindex.js" //导入状态管理器js  注意：如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了

import store from "../src/store/index.js" //导入状态管理器js 


var app=createApp(App)

app.use(store)  //注册vuex插件：状态管理器

app.mount("#app")

组件中使用

<template>
    <select v-model.number="type">
        <option :value="0">App订票</option> <!--:value="0" 用数据绑定的形式，则它的值是数值类型的-->
        <option :value="1">前台兑换</option>
    </select>
    <div>
        <ul>
            <!--从store的getters中获取数据-->
            <!-- <li v-for="item in $store.getters.filterDataList(type)" :key="item.cinemaId">{{ item.name }}</li> -->

            <!-- 改用用辅助函数的方式：它其实就是...mapGetters(["filterDataList"]) 中展开的filterDataList方法 -->
            <li v-for="item in filterDataList(type)" :key="item.cinemaId">{{ item.name }}</li>

        </ul>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    //钩子函数
    mounted() {
        //this.$store.commit("changeAppIsShow", false)代码采用辅助函数的写法：
        this.changeAppIsShow(false) //它其实就是...mapMutations(["changeAppIsShow", "dataListInit"]) 中展开的changeAppIsShow方法。

        console.log("aa",this.appIsShow);//输出：false;

        // if (this.$store.state.datalist.length === 0) {
        if (this.datalist.length === 0) {
            //如果数据为空，则去触发actions的中的getDataList方法，达到获取datalist数据的目的。而this.$store.state.datalist中的数据存在内容中，其他地方需要这个数据直接从内存中取，相当于有个缓存，

            //this.$store.dispatch("getDataList");代码改成如下辅助函数的写法
            this.getDataList(); //它其实就是...mapActions(["getDataList"]) 中展开的getDataList方法
        }

    },
    beforeUnmount() {
        //this.$store.commit("changeAppIsShow",false)代码采用辅助函数的写法：
        this.changeAppIsShow(false) //它其实就是...mapMutations(["changeAppIsShow", "dataListInit"]) 中展开的changeAppIsShow方法。

    },
    //数据
    data() {
        return {
            type: 0,
        }
    },
    //方法:vuex中的Mutations，与Actions 放到methods中进行展开
    methods: {
        ...mapMutations(["changeAppIsShow", "dataListInit"]), //将store中的Mutations函数展开，在DOM中可以直接用：如changeAppIsShow(),dataListInit() 在<script>中也可以直接用：如this.changeAppIsShow(),this.dataListInit()
        ...mapActions(["getDataList"]) //将store中的Actions函数展开，在DOM中可以直接用：如getDataList() 在<script>中也可以直接用：如this.getDataList()
    },
    //计算属性：vuex中的Getters，与State 放到computed中进行展开
    computed: {
        ...mapGetters(["filterDataList"]), //将store中的Getters函数展开，在DOM中可以直接用：如filterDataList() 在<script>中也可以直接用：如this.filterDataList()
        ...mapState(["appIsShow", "datalist"]) //将store中的State数据展开，在DOM中可以直接用：如appIsShow 在<script>中也可以直接用：如this.appIsShow()
    },

}
</script>