vuex内部结构的基础总结

1. 什么是vuex?

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

俗话：就相当于Redux 对数据的一种集中管理及相应的操作，开发项目组件复杂，数据通过props，provide,inject,自定义事件等传递会很复杂。不如就创建一个仓库，把数据统一放在里边，规定一些可预测的操作，来操作数据

2.如何使用？

第一步：先安装（可以在创建项目的时候勾选上vuex,如果没勾选上，那就通过命令安装：npm i vuex -S）

通过命令安装的还需要：

     1.先引入再挂载到Vue上，因为这就是一个插件，得挂载

          import Vuex from 'vuex'

          Vue.use(Vuex)

     2. 使store生效，就是实例化

第二步：开始创建仓库（如果是创建项目时勾选的，脚手架自己就创建好了，也无需自己创建）

     let store = new Vuex.store({

        state,     //这个就是存放公共状态的，一个Vuex中只有一个,是单一的唯一数据源，但是和下边的module中的state不冲突

        mutations, //用来操作state中的状态的，更改Vuex中的store状态的唯一的方法就是提交mutations,类似于事件，mutatinons中有一个字符串的一个事件类型和一个回调函数，回调函数就是进行状态修改。回调函数可以接受state和用户调用时传递的数据

        actions, //提交的是mutations，不是直接变更状态。但是可以执行异步操作

        getters,  //就相当于Vuex的计算属性，如果发生变化才调用，否则不调用

       module:{    //允许将store分割成模块，每个模块都拥有自己的 state mutations actions getters 也可以有module

           moduleName:{

               namespaced:true, //非常重要的一个属性，为true时，就意味着开启了命名空间，module中的 mutations  actions  getters都会变成局部的module中的方法

                state,

               mutations,

               actions,

               getters 

          }

     })

3. 为什么要用actions提交mutations，不是很多余么？

前端用户要修改state里的状态时，有两种方法:1.通过 this.$store.commit('mutations下对应的操作的事件名',payload)来直接调用mutations中的方法来修改。2.通过this.$store.dispatch('actions下对应的操作的事件名',payload)  actions提交mutations来进行修改，既然可以直接调用mutations来修改，actions不是多余么？这里要清楚：

        1.actions接受一个与store实例具有相同方法和属性的context对象，在actions中可以通过context.commit('要提交的mutations的事件名',payload)来提交mutations，可以通过context.state和context.getters分别获取到state和getters

        2.在前端 actions又是通过$store.dispatch来分发的

        用户通过 this.store.dispatch ------->  actions  ------------>   (通过context.commit()) ---------->mutations

         3. mutations必需是同步执行的，而actions可以不受约束，执行异步操作