Vuex学习总结

Vuex:

1.概念：
    在vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
2.何时使用？
    多个组件需要共享数据时
3.搭建vuex环境
    (1).创建文件：src/store/index.js
        // 该文件用于创建Vuex中最为核心的store
        import Vue from 'vue'
        // 引入vuex
        import Vuex from 'vuex'
        Vue.use(Vuex)

        // 准备actions——用于响应组件中的动作
        const actions = {}
        // 准备mutations——用于操作数据（state）
        const mutations = {}
        // 准备state——用于存储数据
        const state = {}

        // 创建并暴露store
        export default new Vuex.Store({
            actions,
            mutations,
            state
        })
        
    (2).在main.js中创建vm时传入store配置项
        ......
        // 引入store
        import store from './store'
        ......

        // 创建vm
        new Vue({
            render:h => h(App),
            store
        }).$mount('#app')
4.基本使用
    (1).初始化数据、配置actions、配置mutations，操作文件store.js
        // 该文件用于创建Vuex中最为核心的store
        // 引入vue核心库
        import Vue from 'vue'
        // 引入Vuex
        import Vuex from 'vuex'
        // 引用Vuex
        Vue.use(Vuex)

        // 准备actions——用于响应组件中的动作
        const actions = {
            // jia(context, value) {
            //     console.log(context, value)
            //     context.commit('JIA', value)
            // },
            // jian(context, value) {
            //     context.commit('JIAN', value)
            // },
            jiaOdd(context, value) {
                if (context.state.sum % 2) context.commit('JIA', value)
            },
            jiaWait(context, value) {
                setTimeout(() => {
                    context.commit('JIA', value)
                }, 500);
            },
        };
        // 准备mutations——用于操作数据（state）
        const mutations = {
            JIA(state, value) {
                console.log(state, value)
                state.sum += value
            },
            JIAN(state, value) {
                state.sum -= value
            }
        };
        // 准备state——用于存储数据
        const state = {
            sum: 0, //当前和
        };

        // 创建并暴露store
        export default new Vuex.Store({
            actions,
            mutations,
            state
        });
    (2).组件中读取vuex中的数据：$store.state.sum
    (3).组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或者$store.commit('mutations中的方法名',数据)
    备注：若没有网络请求或者其他业务逻辑，组件也可以越过actions，即不写dispatch，直接编写commit

5.getters的使用
    1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
    2.在store.js中追加getters配置
        ......
        const getters = {
            bigSum(state){
                return state.sum * 10
            }
        }
        // 创建并暴露store
        export default new Vuex.Store({
            ......
            getters
        })
    3.组件中读取数据：$store.getters.bigSum

6.四个map方法的使用
    (1).mapState方法：用于帮助我们映射state中的数据为计算属性
        computed:{
            // 借助mapState生成计算属性：sum、school、subject(对象写法)
            ...mapState({ sum: "sum", school: "school", subject: "subject" }),

            // 借助mapState生成计算属性：sum、school、subject(数组写法)
            ...mapState(["sum", "school", "subject"]),
        }
    (2).mapGetters方法：用于帮助我们映射getters中的数据为计算属性
        computed:{
            // 借助mapGetters生成计算属性：bigSum(对象写法)
            ...mapGetters({ bigSum: "bigSum" }),

            // 借助mapGetters生成计算属性：bigSum(数组写法)
            ...mapGetters(["bigSum"]),
        }
    (3).mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
        methods:{
            // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
            ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),

            // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
            ...mapActions(["jiaOdd", "jiaWait"]),
        }
    (4).mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
        methods:{
            // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
            ...mapMutations({ increment: "JIA", decrement: "JIAN" }),

            // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
            ...mapMutations(["JIA", "JIAN"]),
        }
    备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

7.模块化+命名空间
    (1).目的：让代码更好维护，让多种数据分类更加明确
    (2).修改store.js
        const personOptions = {
            namespaced: true, // 开启命名空间
            actions: {
                addPersonYu(context, value) {
                    if (value.name.indexOf('余') === 0) {
                        context.commit('ADD_PERSON', value)
                    } else alert('添加的人必须姓余！')
                },
                addPersonServer(context) {
                    axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                        res => {
                            context.commit('ADD_PERSON', { id: nanoid(), name: res.data })
                        }, error => {
                            alert(error.message)
                        }
                    )
                }
            },
            mutations: {
                ADD_PERSON(state, value) {
                    console.log('mutations中的ADD_PERSON被调用了', value)

                    state.personList.unshift(value)
                }
            },
            state: {
                personList: [{
                    id: '001',
                    name: '张三'
                }]
            },
            getters: {
                firstPersonName(state) {
                    return state.personList[0].name
                }
            }
        }
    
        const countOptions = {
            // 开启命名空间（默认为false）
            namespaced: true,
            actions: {
                jiaOdd(context, value) {
                    if (context.state.sum % 2) context.commit('JIA', value)
                },
                jiaWait(context, value) {
                    setTimeout(() => {
                        context.commit('JIA', value)
                    }, 500);
                },
            },
            mutations: {
                JIA(state, value) {
                    console.log(state, value)
                    state.sum += value
                },
                JIAN(state, value) {
                    state.sum -= value
                },
            },
            state: {
                sum: 0, //当前和
                school: 'LS',
                subject: '前端',
            },
            getters: {
                bigSum(state) {
                    return state.sum * 10
                }
            }
        }

        // 创建并暴露store
        export default new Vuex.Store({
            // actions,
            // mutations,
            // state,
            // getters
            modules: { countOptions, personOptions }
        });

    (3).开启命名空间后，组件中读取state数据
        //方式一：自己直接读取state
        this.$store.state.personOptions.personList
        //方式二：借助mapState读取
        ...mapState('countOptions',['sum','school','subject'])

    (4).开启命名空间后，组件中读取getters数据：
        //方式一：自己直接读取getters
        this.$store.getters['personOptions/firstPersonName']
        //方式二：借助mapGetters读取：
        ...mapGetters('countOptions',['bigSum'])

    (5).开启命名空间后，组件中调用dispatch
        //方式一：自己直接dispatch读取
        this.$store.dispatch('personOptions/addPersonYu',personObj)
        //方式二：借助mapActions读取：
        ...mapActions('countOptions',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    (6).开启命名空间后，组件中调用commit
        //方式一：自己直接commit读取
        this.$store.commit('personOptions/ADD_PERSON',person)
        //方式二：借助mapMutations读取：
        ...mapMutations('countOptions',{increment:'JIA',decrement:'JIAN'})