优雅的上手使用Vuex

Vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。
也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

vuex中，有默认的五种基本的对象：

• state：存储状态（公有数据）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。
• mutations：修改状态，并且是同步的。其中只可存在同步方法，切只要在mutations对象中改变state中的值才合法。
• actions：用于实现异步操作。
• modules：store的子模块，为了开发大型项目，可将store拆分为多个模块，方便状态管理而使用的。

项目结构

state

state中存放需要全局共享的数据，并提供给项目中的所有组件使用。

定义：

 state: {
	count:0
 }

在组件中调用：

// 方法1.直接调用

{{$store.state.count}}

// 方法2.通过mapState方法将state中参数抽离为组件计算属性调用

mutations

存放store的同步方法，并有权同步修改state中的值

定义

  mutations: {
    add(state){
      state.count++
    },
  }

调用

//方法1.commit方法

 //在组件中调用
 this.$store.commit('add')
//commit()方法可以传参   commit('函数名',...参数)

//方法2.通过mapMutations将add方法映射到组件的方法中

actions

存放异步方法，因为mutations中只可存在异步方法

定义：

//在一秒钟后调用add方法
actions: {
    addAsync(context){//固定接受一个context参数
      setTimeout(()=>{
        context.commit('add')
      },1000)
    }
  },

调用：

//方法1.组件直接调用

 this.$store.dispatch('addAsync')
//dispatch()方法可以传参   dispatch('函数名',...参数)

//方法2.通过mapActions映射为组件的方法

getters

将state中的数据进行包装后返回，类型计算属性

定义

getters:{
    showNum(state){//接受state为默认参数
      return "当前count为:"+state.count
    }
  },

调用

//方法1.直接调用

{{$store.getters.showNum}}//当前count为:0

//方法2.通过mapGetters方法，将其映射到计算属性中调用

总结

• state 中存放公有数据
  1. 可在组件中通过this.$store.state. 直接获取
  2. 或者通过mapState方法将其映射成为组件的计算属性
• mutations 中存放同步方法，且只有其中方法可以改变state中的数据
  1. 直接通过this.$store.commit(‘方法名’，…参数)调用
  2. 或者通过mapMutations方法映射成为组件的私有方法
• actions 存放异步方法，如异步请求，但仍然需要调用mutations中的方法改变state 中的数据
  1. 直接通过this.$store.dispatch(‘方法名’，…参数)调用
  2. 或者通过mapActions方法映射成为组件的私有方法
• getters 存放数据包装方法，通过特定格式输出state 中数据
  1. 可在组件中通过this.$store.getters. 直接获取
  2. 或者通过mapGetters方法将其映射成为组件的计算属性