vuex辅助函数 【vuex进阶使用】

Vuex的介绍

一：基本使用

1. 新建实例化对象
   const store = new Store.Vuex({})

2. state => 相当于data
   state:{
   name:‘xxx’
   }
   调用形式：this.$store.state.xxx

3. getters => 相当于computed
   getters:{
   contactName(state){
   xxx
   }
   }
   调用形式： this.$store.getters.xxx 默认传入state

4. mutations => 相当于methods
   mutations:{
   changeName(state,[params]){
   xxx
   }
   }
   调用形式 ：this.$store.commit(‘functionName’,params)
   state为默认传入的第一个参数，之后才是自己需要传递的数据

5. actions => 相当于 methods
   action:{
   changeNameAsync(context,[params]){
   xxx
   }
   }
   调用形式： this.$store.dispatch(functionName,params)
   context默认传入 拥有和new Store.Vuex()实例化对象一样的数据和方法

6. mutations和actions的区别
   mutations和actions都可以对state中的数据进行操作，唯一不同的地方在于mutations中不能进行异步操作
   setTimeOut,setInterval这些异步操作都只能在actions中进行。

7. modules模块化

const ModuleA = {
    namespaced: true,
    state:{},
    getters:{},
    mutations:{},
    actions:{},
}
const ModuleB = {
    namespaced: true,
    state:{},
    getters:{},
    mutations:{},
    actions:{},
}
const store = nre Store.Vuex({
    modules:{
        //形式一 调用store.state.a/b
        a:moduleA,
        b:moduleB,
        //形式二 调用store.state.moduleA/moduleB
        mudlueA,moduleB
    }
})

二：辅助函数的使用

1. 引入
   import {mapState,mapGetters,mapMutations,mapActions} from ‘Vuex’
   此处需要注意 Vuex的大小写要与main.js引入时一致 否则会出现警告

2. 使用
   辅助函数是官方提供的state的语法糖，在引入较多的state值的时候，可以利用此函数简化声明
   state和getters归入到computed中去映射 mutations和actions归入到methods中去映射

//默认形式的Vuex维护
data(){
    return{
        // 如果需要引入的state太多的话 就需要写很多重复的代码
        name:this.$store.state.name,
        age:this.$store.state.age,
        sex:this.$stroe.ModuleA.sex,
        height:this.$store.ModuleB.height,
        mergeName:this.$store.getters.mergeName,
    }
}

辅助函数使用的四种形式(/以mapState为例 其他的辅助函数用法基本类似)

// 形式一 mapState传入的参数为对象
computed:mapState({
    // 原来的计算属性保留
    fn1(){return xxx}
    fn2(){return xxx}
    fn3(){return xxx}

    // 维护Vuex的内容
    // 箭头函数的形式 this指向new Store.Vuex()的实例化对象 store
    name:state => state.name,
    // 键名和state的值名称一致
    age:'age',
    // 正常函数定义的形式 需要使用Vue实例化对象中data的数据时必须使用该形式
    sex(state){
        return this.tips + state.sex
    }
})

// 形式二 mapState传入的参数是数组
computed:mapState([
    'name', //映射 this.name = this.$store.state.name
    'age', 
    'sex', 
    // 此形式要求映射的computed的名称 和 state中属性的名称一致
])

// 形式三 使用...拓展运算符
computed:{
    //原本的计算属性保留
    mergeStr(){xxx} 

    //维护Vuex 此形式将mapState函数返回的对象和原本的内容合并在一起
    ...mapState({xxx}) 
    // 也可以使用...mapState([xxx])的形式 但是在之前的基础上多了一个条件 state的值不能存放在module中 
}

// 形式四 ...配合module
computed:{
    // mapState等辅助函数 第一个参数可以指定module中的模块名称
    // 第二个参数 在进行对应的映射操作
    ...mapGetters('footerStatus', {
        isShow: 'isShow',
    })
    ...mapGetters('collection', {
      allList: 'renderCollects'
    })
}

原文链接