【Vuex】

1.使用vuex统一管理状态的好处：

1：能够在vuex中集中管理共享的数据，易于开发和后期维护。

2：能够高效的实现组件之间的数据共享，提高开发效率。

3：存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

2.Vuex中主要的核心概念：

state：提供唯一的公共数据源。所有共享的数据都要统一放到store的sate中进行存储

组件访问state中数据的第一种方式：this.$store.state.全局数据名称

第二种方式：从vuex中按需导入mapState函数 import {mapState} from 'vuex

通过刚才导入的mapSate函数，将当前组件需要的全局数据。映射为当前组件的computed计算属性：computed：{

...mapstate(['count'])

}

Mutation:用于变更store中的数据。  this.$store.commit(）是触发mutations的第一种方式，触发mutations的第二种方式使用mapMutation函数

只能通过mutation变更store数据，不可以直接操作store中的数据

通过这种方式虽然操作起来稍微繁琐一点，但是可以集中监控所有数据的变化

 可以在触发mutations时传递参数：

 第二种方式mapmutations：

Action：用于处理异步任务。

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

在action中不能直接修改state中的数据；必须通过参数.commit（）触发某个mutation才行

dispatch函数专门用来触发action

 

=======================================================================

一般在使用actions方法时我们会像下面的书写方式：

actions:{
    add_num({commit}){
        console.log({commit})
        setTimeout(() => {
            commit('change',100);
        },2000)
    }
}

而很多人都会疑惑{commit}是代表了什么，又是怎么来的。下面就来说一下，action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：

 context:{
        state,   等同于store.$state，若在模块中则为局部状态
        rootState,   等同于store.$state,只存在模块中
        commit,   等同于store.$commit
        dispatch,   等同于store.$dispatch
        getters   等同于store.$getters
}

常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的
位置写自己想要的属性，如：{commit}。
 

===============================================================================

Getter：用于对store中的数据进行加工处理形成新的数据。

1：getter可以对store中已有的数据加工处理之后形成新的数据，类似vue的计算属性

2：store中数据发生变化，getter的数据也会跟着变化