一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

Vuex

State

1. 概念：Stare本质上就是Object对象

2. 作用：用来存储全局共享的数据

3. 访问方式：

   1. 在每个Vuez组件中，通过this.$store.state.全局数据名称访问Store中的数据

   2. 基于Vuex提供的mapState辅助函数，可以方便的把Store中指定的数据，映射为当前组件的计算属性

      • 先按需导入赋值函数mapStateimport {mapState} from 'vuex'
      • 把需要的全局数据，映射当前组件的计算属性...mapState(['数据名'])...表示展开

   3. 安装使用 1.下包 yarn add vuex@3.6.2适合Vue2开发 2.导入 import Vuex from 'Vuex' 3.安装插件 Vue.use(Vuex) 4.创建Store对象(里面存放state数据) const store = new Vuex.Store({}) 5.将store挂到Vue实例上

      new Vue({
        store
      }).$mount('#app')
      

Mutation

1. 作用：本质上是一个JavaScript函数，专门用来==修改State中的数据==

2. 通过this.$store.state.cont=1修改count的数据，但是会导致修改来源不明确的问题，不利于调试和后期维护。vue官方也是不建议这样修改

3. 使用步骤：

   • 在Vuex中定义Mutation方法

      mutations:{
             mutations:{
             	add(state,payload){//由于mutation要修改state的数据，第一个参数永远都是state，
     							//需要传参，第二个参数永远都是payload载荷
                 state.count += payload
          	}
       	 }
         }
     

   • 在组件中调用Mutation方法

4. ==Mutation必须是同步函数==

不要在Mutation中异步的变更uex中的数据，因为devtools无法监视到数据的变化

载荷（Payload）

1. Vuex中的载荷就是参数的意思，通过载荷可以提高Mutation方法的通用性

提交载荷

1. 在组件中，可以通过this.$store.commit()方法的第二个参数来提交载荷（参数）
2. 因为载荷只能写一个参数，所以我们一般把载荷参数写一个对象。

mapMutations辅助函数

1. 基于Vuex提供的mapMutations辅助函数，可以方便的把Store中指定的方法，映射为当前组件的methods