Vuex中getters和4个map方法的使用

getters

getters是store中全新的配置项，不是必须的配置项。

getters是store的计算属性，对state里面的数据进行加工。相当于computed，会根据它的依赖被缓存起来，只有当依赖值发生变化时才重新计算。

使用方法：直接在store配置文件index.js中添加getters对象，在对象里面配置相关方法，方法里面是一个返回值，和computed的使用方法一样。

getters对象里面的方法的入参是state，可通过state获取需要加工的数据。靠返回值来决定自己的值。

步骤：index.js中配置和使用->组件使用（$store.getters.方法名）

store配置文件index.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引入持久化存储插件
import persistedstate from 'vuex-persistedstate'

// 使用Vuex
Vue.use(Vuex)

// 准备actions-用于响应组件中的动作
const actions = {
    // 功能2-第二步。判断当前是否为A班级，如果不是再使用commit调用mutations里面的方法。
    getChange(context,value){
        if(context.state.className !== 'A班级'){
            context.commit('getChangeAfter',value)
        }else{
            alert('当前是A班级，不能修改！');
        }
    }
}
// 准备mutations-用于操作数据（state）
const mutations = {
    // 功能1-第二步。直接调用方法。
    getNameCommit(state,value){
        console.log(state,value);
        state.className = value;
    },
    // 功能2-第三步。如果不是A班级，则调用该方法。
    getChangeAfter(state,value){
        state.className = value;
    }
}

// 准备state-用于存储数据
const state = {
    className: '',
    studentName: ''
}

// 准备getters-对state进行加工处理
const getters = {
    allName(state){
        return state.className + '999';
    }
}

// 创建并暴露store

export default new Vuex.Store({
    actions,
    mutations,
    state,
    // 配置getters
    getters,
    // 使用持久化插件
    plugins:[persistedstate({
        storage: window.sessionStorage,
        reducer(state){
            return{
                // 只存储state中的className
                className:state.className
            }
        }
    })]
}) 

组件使用：

<!-- 组件使用getters -->
<span>{{$store.getters.allName}}</span> 

Vuex中map方法的使用

mapState

在组件中读取state中的数据：

...
<span>这是学校里面班级的信息，这里是{{$store.state.className || '--'}}班</span>
<span>学校名为：{{$store.state.schoolName || '--'}}</span>
<!-- 使用getters -->
<span>{{$store.getters.allName || '100'}}</span>
... 

通过观察可以发现，$store.state的重复率很高，但又不得不这样取值。所以，vuex就有一个mapState来映射state里面的数据为计算属性，我们直接使用计算属性就行。

store配置文件index.js里面state：

...
// 准备state-用于存储数据
const state = {
    className: '',
    studentName: ''
}
...
export default new Vuex.Store({
    ...
    state,
    ...
}) 

步骤：组件中导入mapState->在计算属性中配置mapState->页面直接使用计算属性值

导入：

import {mapState} from 'vuex' 

计算属性中配置mapState：

这里有两种配置：

1.组件里面计算属性名和state里面对应的变量名不一样时采用对象写法。

2.组件里面计算属性名和state里面对应的变量名一样时采用数组写法。

对象写法：

...
<span>这是学校里面班级的信息，这里是{{classNameObj || '--'}}班</span>
<span>学校名为：{{schoolNameObj || '--'}}</span>
...
import { mapState } from 'vuex'
...
computed:{
        // mapState函数返回为一个对象，mapState({计算属性名，组件使用:'state中对应的变量名'})
        ...mapState({classNameObj:'className',schoolNameObj:'schoolName'})
    }
... 

数组写法:

...
<span>这是学校里面班级的信息，这里是{{className || '--'}}班</span>
<span>学校名为：{{schoolName || '--'}}</span>
...
import { mapState } from 'vuex'
...
computed:{
        // mapState函数返回为一个对象，mapState(['计算属性名（state中对象变量名）'])
        ...mapState(['className','schoolName'])
    }
... 

mapGetters

与mapState类似，也是两种写法：

步骤：组件中导入mapGetters->在计算属性中配置mapGetters->页面直接使用计算属性值

store配置文件index.js里面getters：

...
// 准备getters-对state进行加工处理
const getters = {
    allName(state){
        return state.className + '999';
    }
}
...
export default new Vuex.Store({
    ...
    // 配置getters
    getters,
    ...
}) 

这里有两种配置：

1.组件里面计算属性名和getters里面对应的计算属性名不一样时采用对象写法。

2.组件里面计算属性名和getters里面对应的计算属性名一样时采用数组写法。

对象写法：

...
<span>{{allNameObj || '100'}}</span>
...
import { mapGetters } from 'vuex'
...
computed:{
        // mapGetters函数返回为一个对象，mapGetters({计算属性名，组件使用:'getters中对应的计算属性名'})
        ...mapGetters({allNameObj:'allName'})
    }
... 

数组写法:

...
<span>{{allName || '100'}}</span>
...
import { mapGetters } from 'vuex'
...
computed:{
        // mapGetters函数返回为一个对象，mapGetters(['计算属性名（getters中对应的计算属性名）'])
        ...mapGetters(['allName'])
    }
... 

mapActions

用于帮助生成与actions对话的方法，即：包含$store.dispatch()的函数。

若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象。

组件里面通过dispatch触发actions里面的方法：

 methods:{
        ...
        changeAfter(){
             this.$store.dispatch('getChange',this.classNameInput);
        },
        changeSchoolAfter(){
             this.$store.dispatch('getSchoolChange',this.schoolNameInput);
        }
        ...
    }, 

可以发现，也要重复this.$store.dispatch代码，所以有个mapActions映射。通过mapActions生成对应的方法，方法中会调用dispatch去联系actions。

步骤：组件中导入mapActions->在方法中配置mapActions

store配置文件index.js里面actions：

// 准备actions-用于响应组件中的动作
const actions = {
    getChange(context,value){
        if(context.state.className !== 'A班级'){
            context.commit('getChangeAfter',value)
        }else{
            alert('当前是A班级，不能修改！');
        }
    },
    getSchoolChange(context,value){
        console.log(context,value,'业务逻辑或请求数据');
    },
} 

这里有两种配置：

1.组件里面方法名和actions里面对应的方法名不一样时采用对象写法。

2.组件里面方法名和actions里面对应的方法名一样时采用数组写法。

对象写法：

...
<!-- 注意：使用mapActions，参数需要在这里传过去。 -->
<button class="button-name" @click="changeAfter(classNameInput)">判断修改</button>
<button class="button-name" @click="changeSchoolAfter(classNameInput)">判断修改-学校</button>
...
import { mapActions } from 'vuex'
...
methods:{
...
// mapActions函数返回为一个对象，mapActions({组件方法名:'actions中对应的方法名'})
...mapActions({changeAfter:'getChange',changeSchoolAfter:'getSchoolChange'})
...
}
... 

数组写法:

...
<!-- 注意：使用mapActions，参数需要在这里传过去。 -->
<button class="button-name" @click="getChange(classNameInput)">判断修改</button>
<button class="button-name" @click="getSchoolChange(classNameInput)">判断修改-学校</button>
...
import { mapActions } from 'vuex'
...
methods:{
...
// mapActions函数返回为一个对象，mapActions([组件方法名(actions中对应的方法名)])
...mapActions(['getChange','getSchoolChange'])
...
}
... 

mapMutations

用于帮助生成与mutations对话的方法，即：包含$store.commit()的函数。

若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象。

组件里面通过commit触发mutations里面的方法：

 methods:{
        ...
        changeName(){
            this.$store.commit('getNameCommit',this.classNameInput);
        },
        changeSchoolName(){
            this.$store.commit('schoolNameCommit',this.schoolNameInput);
        },
        ...
    }, 

同理：mapMutations与mapActions类似。

通过mapMutations生成对应的方法，方法中会调用commit去联系mutations。

步骤：组件中导入mapMutations->在方法中配置mapMutations

store配置文件index.js里面actions：

// 准备mutations-用于操作数据（state）
const mutations = {
    getNameCommit(state,value){
        console.log(state,value);
        state.className = value;
    },
    schoolNameCommit(state,value){
        console.log(state,value,'操作state数据')
    }
} 

这里有两种配置：

1.组件里面方法名和mutations里面对应的方法名不一样时采用对象写法。

2.组件里面方法名和mutations里面对应的方法名一样时采用数组写法。

对象写法：

...
<!-- 注意：使用mapMutations，参数需要在这里传过去。 -->
<button class="button-name" @click="changeName(classNameInput)">直接修改</button>
<button class="button-name" @click="changeSchoolName(classNameInput)">直接修改-学校</button>
...
import { mapMutations } from 'vuex'
...
methods:{
...
// mapMutations函数返回为一个对象，mapMutations({组件方法名:'mutations中对应的方法名'})
...mapMutations({changeName:'getNameCommit',changeSchoolName:'schoolNameCommit'})
...
}
... 

数组写法:

...
<!-- 注意：使用mapMutations，参数需要在这里传过去。 -->
<button class="button-name" @click="getNameCommit(classNameInput)">直接修改</button>
<button class="button-name" @click="schoolNameCommit(classNameInput)">直接修改-学校</button>
...
import { mapMutations } from 'vuex'
...
methods:{
...
// mapMutations函数返回为一个对象，mapMutations([组件方法名(mutations中对应的方法名)])
...mapMutations(['getNameCommit','schoolNameCommit'])
...
}
...