Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex的工作原理

Vue Compoments：vue组件。展示页面。负责接收用户的行为交互。
dispatch：用户操作行为触发的方法。是唯一可以执行actions的方法。
actions：进行用户操作的处理，可包含同步或异步任务。
commit：状态改变提交操作的方法。是唯一可以执行mutations的方法。
mutations：状态改变的方法。是vuex提供的修改state的唯一方法。该方法只能同步进行，且里包含的方法名全局唯一。
state： vuex状态管理的数据容器对象。提供唯一的公共数据源。所有需要共享的数据都需要放在state中，并且它们是唯一的。

Vuex的核心概念

1. State

提供唯一的公共数据源。所有需要共享的数据都需要放在state中

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
    state: { count: 0 }
})

组件访问state中数据的第一种方式

this.$store.state.全局数据名称

组件访问state中数据的第二种方式

//1. 从Vuex中按需导入mapState函数
//2. 通过mapState函数将当前组件所需要的全局数据映射为当前组件的computed计算属性：
import { mapState } from 'vuex'
computed: {
    ...mapState(['count'])
}

2. Mutation

用于改变Store中的数据

只能通过Mutation来修改store中的数据。
通过这种方法虽然操作起来比较繁琐，但是可以集中管理所有数据的变化。

//定义Mutation
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutation: {
        方法名(state,其他参数...){
            //改变state.count状态
        }//参数列表中的第一个参数state为固定形参，可通过state得到所有的公共数据。
    }
})

组件触发Mutation的第一种方式

this.$store.commit('方法名',其他参数)

组件触发Mutation的第二种方式

//1. 从vuex中按需导入mapState函数
//2. 通过mapMutations函数将当前组件所需要的全局方法映射为当前组件的methods方法：
import { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['方法名'])
}

3. Action

用于处理异步任务，如果通过异步操作变更数据则必须通过Action，而不能使用Mutation，但在Action中还是要通过触发Mutation的方式间接的变更数据

//定义Action
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutation: {
        方法名1(state,其他参数...){
        
        }
    },
    cations: {
        方法名2(context,其他参数...){
            setTimeout(()=>{
                context.commit('方法名1',其他参数...)  //调用Mutation中的方法，间接修改数据
                ////参数列表中的第一个参数context为固定形参，可通过context得到mutation中的所有方法
            },2000)
        }
    }
})

组件触发Action的第一种方式

this.$store.dispatch('方法名',其他参数...)

组件触发Action的第二种方式

//1. 从vuex中按需导入mapActions函数
//2. 通过mapActions函数将当前组件所需要的全局方法映射为当前组件的methods方法：
import { mapActions } from 'vuex'
methods: {
    ...mapActions(['方法名'])
}

4. Getter

用于对Store加工处理形成新的数据

不会修改Store中的原数据。只起到一个包装器的作用。
可以对Store中的已有数据进行加工形成新的数据，类似于vue的计算属性。
当Store中的数据发生变化时，Getter中的数据也会跟着变化。

//定义Getter
const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        方法名(state) {
            return '当前的count值为' + state.count
        }
    }
})

组件触发Getter的第一种方式

this.$store.getters.方法名

组件触发Getter的第二种方式

//1. 从vuex中按需导入mapGetters函数
//2. 通过mapGetters函数将当前组件所需要的全局方法映射为当前组件的computed计算属性：
import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['方法名'])
}