Vuex核心知识整理

1 搭建vuex环境

2 求和案例

3 getters 配置项

4 mapState 和 mapGetters

5 mapMutations 和 mapActions

6 Vuex 模块化

1 搭建vuex环境

vuex工作原理图（摘自官网）

什么时候使用Vuex：

1.当多个组件依赖于统一状态

2.来自不同组件的行为需要变更同一状态

(1). 首先再src目录下创建store文件夹，然后创建index.js文件（该文件用于创建 vuex 中最为核心的 store), 然后在main.js中引入这个index.js文件

【index.js】

/* 该文件用于创建 vuex 中最为核心的 store */
// 引入Vue
import Vue from 'vue'

// 引入vuex
import Vuex from 'vuex'

// 使用插件
Vue.use(Vuex)

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

    /* 没有业务逻辑的，可以直接跳过这步，直接commit */
    // jia(context, num) {
    //     context.commit('JIA', num)
    // },
    // jian(context, num) {
    //     context.commit('JIAN', num)
    // },

    /* 有业务逻辑的 */
    jiaOdd(context, num) {
        if (context.state.sum % 2) {
            context.commit('JIA', num)
        }
    },
    jiaWait(context, num) {
        setTimeout(() => {
            context.commit('JIA', num)
        }, 1000)
    },
}

// 2. 准备mutations: 用于操作数据（state）
const mutations = {
    JIA(state, num) {
        // console.log(num)
        state.sum += num
    },
    JIAN(state, num) {
        state.sum -= num
    }
}

// 3. 准备state: 用于保存数据
const state = {
    sum: 0,  // 当前的和
}


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

2 求和案例

【Count】

<template>
  <div>
    <h1>当前求和为：{{ $store.state.sum }}</h1>
    <select v-model.number="num">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addIfOdd">当前求和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
    export default {
        name: 'Count',
        data() {
            return {
                num: 1, //用户选择的数字
            }
        },
        methods: {
            /* 没有业务处理，直接commit, 联系mutations */
            add() {
                this.$store.commit('JIA', this.num)
            },
            sub() {
                this.$store.commit('JIAN', this.num)
            },

            /* 有业务处理，先dispatch, 联系actions，再commit, 联系mutations */
            addIfOdd() {
                this.$store.dispatch('jiaOdd', this.num) 
            },
            addWait() {
                this.$store.dispatch('jiaWait', this.num)
            }
        },
    }

</script>

<style>
    button {
        margin-left: 8px;
    }
</style>

在组件中使用处理过后的数据时(比如上方的sum )，用 {{ $store.state.sum }}

3 getters 配置项

【index.js】

......
// 3. 准备state: 用于保存数据
const state = {
    sum: 0,  // 当前的和
    school: '北京大学',
    subject: '计算机'
}

// getters: 用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

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

【Count】

在组件中使用getters中加工后的数据

<h3>放大十倍的和为：{{ $store.getters.bigSum }}</h3>

4 mapState 和 mapGetters

在上述的案例中，当我们需要使用state或者getters中的数据时，在组件中的模板中，需要写 $store.state.xx，这样写的话，不够精简。以下将介绍几种方法，利用计算属性去处理这种不足之处

【state和getters中的数据】

// 3. 准备state: 用于保存数据
const state = {
    sum: 0,  // 当前的和
    school: '北京大学',
    subject: '计算机'
}

// 。getters: 用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

【在组件中导入】

import { mapState, mapGetters } from 'vuex'

1. 获取state中的数据：

【方法1】靠程序员自己手写计算属性

.......
computed: {
    /* 1.靠程序员自己去写计算属性 */
    he() {
         return this.$store.state.sum
    },
    xuexiao() {
         return this.$store.state.school
    },
    xueke() {
         return this.$store.state.subject
    },
}

<h1>当前求和为：{{ sum }}</h1>
<h3>我在：{{ xuexiao}}, 学习{{ xueke}}</h3>

【方法2】使用vuex的mapState生成计算属性，从state中获取数据（对象写法）

computed: {
    // .......


    ...mapState({he:'sum', xuexiao:'school', xueke:'subject'}),  // 使用扩展运算符展开对象
}

【方法3】使用vuex的mapState生成计算属性，从state中获取数据（数组写法）

computed: {
    // ......

    ...mapState(['sum', 'school', 'subject']),
}

使用数组写法的前提是：计算属性的属性名和state中的数据的名称是相同的

2. 获取getters中的数据：

【方法1】使用vuex的mapGetters生成计算属性，从getters中获取数据（对象写法）

computed: {
    // ......

    ...mapGetters({bigSum:'bigSum'})
}

【方法2】使用vuex的mapGetters生成计算属性，从getters中获取数据（数组写法）

computed: {
    // ......

    ...mapGetters(['bigSum'])
}

前提和上面一样

5 mapMutations 和 mapActions

当我们在组件中想要联系actions 或者 mutations 时，我们需要使用this.$store.dispatch(...) 或者 this.$store.commit(...) 这样写的话，如果有多个就会写很多重复的 this.$store.dispatch ......

所以我们可以使用mapMutations和mapActions来解决这种问题

【在组件中导入】

import { mapMutations, mapActions } from 'vuex'

1. 联系mapMutations：

【方法1】借助vuex的mapMutations生成方法，方法中调用commit方法去联系 mutations （对象的写法）

methods: {
    // ......

    ...mapMutations({add: 'JIA', sub: 'JIAN'}),
}

【方法2】借助vuex的mapMutations生成方法，方法中调用commit方法去联系 mutations （数组的写法）

methods: {
    // .......

    ...mapMutations(['JIA', 'JIAN']),  // 函数名也要改成对应的JIA、JIAN
}

2. 联系mapActions:

【方法1】借助mapActions 对象的写法

methods: {
    // ......
    
    ...mapActions({addIfOdd: 'jiaOdd', addWait: 'jiaWait'})
}

【方法2】借助mapActions 数组的写法

methods: {
    // ......    

    ...mapActions(['addIfOdd', 'addWait'])
}

但是使用上述方法时，并不会传递参数，如果不指定参数的话，会默认传递事件对象 event, 所以计算结果会出错，所以我们需要在 <template></template>中指定传递的参数

    <button @click="add(num)">+</button>
    <button @click="sub(num)">-</button>
    <button @click="addIfOdd(num)">当前求和为奇数再加</button>
    <button @click="addWait(num)">等一等再加</button>

6 Vuex 模块化

【index.js】

/* 该文件用于创建 vuex 中最为核心的 store */
// 引入Vue
import Vue from 'vue'

// 引入vuex
import Vuex from 'vuex'

import axios from 'axios'

import nanoid from 'nanoid'

// 使用插件
Vue.use(Vuex)

/* 1.求和功能相关的配置 */
const countOptions = {
    namespaced: 'true',
    actions: {
        jiaOdd(context, num) {
            if (context.state.sum % 2) {
                context.commit('JIA', num)
            }
        },
        jiaWait(context, num) {
            setTimeout(() => {
                context.commit('JIA', num)
            }, 1000)
        },
    },
    mutations: {
        JIA(state, num) {
            // console.log(num)
            state.sum += num
        },
        JIAN(state, num) {
            state.sum -= num
        },
    
        ADD_PERSON(state, person) {
            state.personList.unshift(person)
        },
    },
    state: {
        sum: 0,  // 当前的和
        school: '北京大学',
        subject: '计算机',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

/* 2.人员功能相关的配置 */
const personOptions = {
    namespaced: 'true',
    actions: {
        addPersonxie(context, person) {
            if (person.name.indexOf('谢') === 0) {
                context.commit('ADD_PERSON', person)
            } else {
                alert('添加的人必须姓谢')
            }
            
        }, 
        addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', {id: nanoid(), name: response.data})
                },
                error => {
                    console.log(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, person) {
            state.personList.unshift(person)
        }
    },
    state: {
        personList: [
            {id:'001', name:'zs'}
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}



/* 创建并暴露store */
export default new Vuex.Store({
    modules: {
        count: countOptions,
        person: personOptions
    }
})

使用模块化时，state中就变成了count 和 person两个被导出的模块，而具体的数据就在对应的模块中

在模板中就可以使用以下方式使用数据 {{ count.xx}} 、 {{ person.xx}}

    <h1>当前求和为：{{ count.sum }}</h1>
    <h2>放大十倍的和为：{{ bigSum }}</h2>
    <h3>我在：{{ count.school }}, 学习{{ count.subject }}</h3>

    <h4 style="color: red;">Perosn组件的总人数是: {{ person.personList.length }}</h4>

但是这样写的话，模板中的写法还是过于繁琐，所以我们可以将所需要的数据指定所在的模块中，然后就可以直接用了。

// 这里以对象的写法为例
...mapState('count', ['sum', 'school', 'subject']),  // 需要配置namespaced:true

         methods: {
            ...mapMutations('count', {add: 'JIA', sub: 'JIAN'}),

            ...mapActions('count', {addIfOdd: 'jiaOdd', addWait: 'jiaWait'})

        },