Vue2系列教程——Vuex（下）

Vue2 Vuex（下） 1. getters配置项

作用：当state中的数据需要经过加工后再使用时，可以使用getters加工。
store文件夹中index.js，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {}

const mutations = {}

const state = {
    sum: 0
}

// getters，用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return stats.sum + 10        // 注意这里是要return返回值的！
    }
}

export default const new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

Home.vue文件中，

<template>
	<div>{{ $store.getters.bigSum }}div>
template>

2. mapState 与 mapGetters

<template>

<div>{{he}}div>
<div>{{xuexiao}}div>


<div>{{sum}}div>
<div>{{school}}div>

<div>{{bigSum}}div>
template>
<script>
import {mapState, mapGetters} from 'vuex'
computed:{
     // 方式一：对象写法，借助mapState生成计算属性，从state中读取出来，这里表示 this.$store.state.sum，this.$store.state.school
    ...mapState({ he:'sum', xuexiao:'school'})                  // ES6语法
    
    // 方式二：数组写法
    ...mapState(['sum', 'school'])
    
    // mapGetters，这里表示 this.$store.getters.bigSum
    ...mapGetters(['bigSum'])
}
script>

3. mapActions 与 mapMutations

<template>
<button @clicl="add(3)">求和button>
<div>{{$store.state.sum}}div>

<button @clicl="decrease(5)">相减button>
template>
<script>
import {mapMutations, mapActions} from 'vuex'

methods: {
    // 方式一：对象写法，借助mapMutations生成对应的方法，方法中会调用commit去联系mutations，这里表示 this.$store.commit('jia',3) this.$store.commit('jian',5)
    ...mapMutations({add:'JIA', decrease:'JIAN'})
    
    // 方式二：数组写法
    ...mapMutations(['add', 'decrease'])
    
    // mapActions，借助mapActions生成对应的方法，方法中会调用dispatch去联系actions，这里表示 this.$store.dispatch('jia',3)
    ...mapActions(['decrease'])
}
script>

方式一：不使用namespace的方式store文件夹中index.js，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 模块化，求和配置项
const countOptions = {
    actions:{
        jia(context, value){
            context.commit('JIA', value)
        }
    },
    mutations:{
        JIA(state, value){
            state.sum = value + 8
        }
    },
    state:{
        sum: 0
        dec: 2
    }
}

// 人员相关配置项
const personOptions = {
    actions:{},
    mutations:{},
    state:{}
}

export default const new Vuex.Store({
    modules:{    
        countOptions ,
        personOptions
    }
})

Home.vue文件中，

<template>
<div>{{countOptions.sum}}div>
template>
<script>
import {mapState} from 'vuex'

computed:{
    ...mapState(['countOptions', 'personOptions'])
}
script>

方式二：使用namespace方式
store文件夹中index.js，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const countOptions = {
    namespace: true,                      // 命名空间
    actions:{
        jia(context, value){
            context.commit('JIA', value)
        }
    },
    mutations:{
        JIA(state, value){
            state.sum = value + 8
        }
    },
    state:{
        sum: 0
        dec: 2
    }
}

const personOptions = {
    namespace: true,
    actions:{},
    mutations:{},
    state:{}
}

export default const new Vuex.Store({
    modules:{    
        countOptions ,
        personOptions
    }
})

Home.vue文件中，

<template>
<div>{{sum}}div>
<div>{{dec}}div>
<button @click="add(3)">求和<button>
template>
<script>
import {mapState, mapMutations} from 'vuex'

computed:{
    ...mapState('countOptions', ['sum','dec'])       // 这里的countOptions就是使用了命名空间起的作用，下面同理
    ...mapState('personOptions', ['',''])
    
    sum2(){
        return this.$store.state.countOptions.sum    // 不简写
    }
    
    // getters的用法请看《尚硅谷》第116集
}
methods:{
    ...mapMutations('countOptions',{add:'JIA'})
    
    add2(num){
        this.$store.commit('countOptions/JIA', num)   // 不简写，注意这里的写法mutations里的函数用“/”隔开
    }
}
script>