1. 概念

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信

2. 何时使用?

多个组件需要共享数据时

3. 搭建vuex环境

创建文件:src/store/index.js

        // 引入vue
        import Vue from 'vue'
        // 引入Vuex
        import Vuex from 'vuex'
        // 使用Vuex插件
        Vue.use(Vuex)

        // 准备actions---用于响应组件中的动作
        const actions = {

        }

        // 准备mutations---用于操作数据(state)
        const mutations = {

        }

        // 准备state---用于存储数据
        const state = {

        }


        // 创建store and 导出
        export default new Vuex.Store({
            actions,
            mutations,
            state
        })

在main.js中创建vm时传入store配置时

    ....
    // 引入store 
    import store from './store'
    ....

    // 创建vm
    const vm = new Vue({
        render:h=>h(App),
        store,
        beforeCreate(){
        Vue.prototype.$bus = this  
        }
    })

4. 基本使用

4.1 初始化数据,配置actions,配置mutations,操作文件store.js

        // 引入vue
        import Vue from 'vue'
        // 引入Vuex
        import Vuex from 'vuex'
        // 使用Vuex插件
        Vue.use(Vuex)


        const actions = {
            // 响应组件中加的动作
            jia(context,value){
                // console.log('actions中的jia被调用了',context,value)
                context.commit('JIA',value)
            }
        }

        const mutations = {
            // 执行加
            JIA(state,value){
                // console.log('mutations中的JIA被调用了',state,value)
                state.sum += value
            }
        }

        // 初始化数据
        const state = {
            sum:0
        }

        // 创建并暴露store
        export default new Vue.Store({
            actions,
            mutations,
            state
        })

4.2 组件中读取vuex中的数据: $store.state.sum

4.3 组件中修改vuex中的数据: $store.dispatch('actions中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注:若没有网络请求或其他业务逻辑,组件中也可越过actions,既不写dispatch,直接编写commit

5. getters的使用

5.1 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工

5.2 再store.js中追加getters配置

        ....
        const getters = {
            bigSum(state){
                return state.sum * 10
            }
        }


        // 创建并暴露store
        expost default new Vuex.Store({
            ....
            getters
        })

5.3 组件中读取数据:
$store.getters.bigSum

6. 四个map方法的使用

6.1 mapState方法,用于帮助我们映射state中的数据为计算属性

       computed:{
           // 借组mapState生成计算属性: sum,school,subject(对象写法)
           ...mapState({sum:'sum',school:'school',subject:'subject'}),


           // 借助mapState生成计算属性,从state中读取数据(数组写法)
           ...mapState(['sum','school','subject']),

6.2 mapGetters方法:用于帮助我们映射getters中的数据为计算属性

        computed:{
            // 借助mapState生成计算属性,从state中读取数据.(对象写法)
             ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

            // 借助mapState生成计算属性,从state中读取数据(数组写法)
            ...mapState(['sum','school','subject']),
        }

6.3 mapActions方法:用于帮助我们生成于actions对话的方法,即:包含$store.dispatch(xxx)的函数

        methods:{
            // 靠mapActions生成:inCrementOdd,inCrementWait(对象形式)
            ...mapActions({inCrementOdd:'jiaOdd',inCrementWait:'jiaWait'}),

            // 靠mapActions生成:inCrementOdd,inCrementWait(数组形式)
            ...mapActions(['jiaOdd','jiaWait']),
        }

6.4 mapMutations方法:用于帮助我们生成与mutations对话的方法,既:包含$store.commit(xxx)的函数

        methods:{
            // 靠mapMutations方法生成:inCrement,deCrement(对象形式)
            ...mapActions({inCrement:'JIA',deCrement:'JIAN'}),

            // 靠mapMutations方法生成:JIA,JIAN(数组形式)
            ...mapActions(['JIA','JIAN']),
        }

备注:mapActions与mapMutations使用时,若需要传递参数需要,在模板中绑定事件时传递好参数,否则参数是事件对象

7. 模块化+命名空间

7.1 目的:让代码更好维护,让多种数据分类更加明确

7.2 修改store.js

        const countAbout = {
            namespaced:true, //开启命名空间
            state:{x:1},
            mutations:{...},
            actions:{....},
            getters:{
                bigSum(state){
                    return state.sum * 10
                }
            }
        }

        const personAbout = {
            namespaced:true, //开启命名空间
            state:{...},
            mutations:{...},
            actions:{...}
        }

        const store = new Vuex.Store({
            modules:{
               countAbout, 
               personAbout
            }
        })

7.3 开启命名空间后，组件中读取state数据:

        //方式一:自己直接读取
        this.$store.state.personAbout.list
        //方式二:借助mapState读取
        ...mapState('personAbout',['list'])

张勇辉

526互联