这是我参与「第四届青训营」笔记创作活动的第2天

一、vuex介绍

在vue2中，与之匹配的是Vuex3，所以官方给的Vuex介绍是： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
而现在vue已经更新到vue3版本，所以vue3中，与之匹配的是Vuex4，官方给的Vuex介绍是：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex可以将各个组件中共享的状态进行集中式管理，实现组件之间的数据共享，同时包含acitons，mutaions，state三个部分，可以对管理的状态进行按需更改使用，同时利用Vue.js的响应式机制来进行高效的管理与更新。

二、为什么使用模块

在实际开发中，我们经常遇到多个组件共享同一状态，或者多个组件对同一状态进行更新操作，在涉及的组件较少时，我们可以通过组件之间的数据传递来实现状态共享并更新，但是如果组件的数量过多，组件之间的联系也会随之变得更加复杂和麻烦，组件之间的通信难以维护。这时就需要Vuex进行状态管理，将共享数据抽取出来进行统一存储管理。

三、使用vuex进行状态集中管理的优点

● 使用Vuex进行集中状态管理和共享数据，易于开发和后期维护
● 能够高效地实现组件之间的数据共享，提高开发的效率
● Vuex中的数据都是响应式的

四、Vuex的状态管理模式

图片.png 从图中我们可以了解到Vuex是包含三个部分：Actions、Mutations、State，组件通过dispatch来操作Actions，Actions通过Commit来操作Mutaions中的方法。同时在Actions中，我们还可以调用到dispatch和state，来进行状态操作，而在组件中，我们也可以借助store来获取state。Vuex运行机制依赖Vue内部数据双向绑定机制，需要new一个Vue对象来实现响应式，所以Vuex是一个专门为Vue.js设计的状态管理库.

四、Vuex的模块化介绍

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

五、Vuex模块化的使用

在src目录下创建store文件夹作为Vuex文件夹，同时在文件夹内创建一个index.js文件，里面用于创建Vuex中最为核心的store

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

在store文件夹内创建count.js，为Count组件在Vuex中的相关配置

export default {
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            console.log('actions中的jiaOdd被调用了')
            if(context.state.sum % 2){
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            console.log('actions中的jiaWait被调用了')
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)
        }
    },
    mutations:{
        JIA(state,value){
            console.log('mutations中的JIA被调用了')
            state.sum += value
        },
        JIAN(state,value){
            console.log('mutations中的JIAN被调用了')
            state.sum -= value
        },
    },
    state:{
        sum:0, //当前的和
        school:'大肥羊学校',
        subject:'Web前端',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    },
}

在store文件夹内创建person.js，为Person组件在Vuex中的相关配置

import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON',value)
            }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 => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}

六、Vuex总结

state用于存储数据（类似于组件中的data）
getters用于包装数据（类似于组件中的computed计算属性）
mutations用于处理state中数据，存放方法
actions用于进行异步操作
注：在Vuex的模块化使用中，相应的，在组件中使用时也需要指定模块名之后才能进行使用

Vuex模块化｜ 青训营笔记