Vue学习：Vue中的vuex

一、vuex是什么

1、概念：vuex是专门在Vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理，也是一种组件间通信的方式，而且适用于任意组件间的通信。

2、vuex用于：当多个组件依赖于同一状态；来自不同组件的行为需要变更同一状态。

二、vuex的工作原理图

其中，state用于存储数据；

mutations用于操作数据；

actions用于响应组件中的动作；

还有getters是用于将state中的数据进行加工。

具体实现：

1、首先需要安装vuex插件：npm i vuex ；

2、在store文件夹中新建index.js文件，然后进行初始化：

import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  // 配置（state|mutations|actions）
})

export default store

并在main.js中引入store；

mapState和mapGetters：

mapState是用于当组件需要获取多个状态时，将这些状态都声明计算属性会有些重复和冗余，所以可以使用mapState辅助函数帮助我们生成计算属性。然后通过扩展运算符将mapState对象放入到计算属性中，具体代码如下：

 computed:{

     ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

    },

mapGetters使用方式和mapState类似，mapGetters是从getters中读取数据，如：

...mapGetters({bigSum:'bigSum'})；

mapMutations和mapActions:

mapMutations是vuex中mutations的辅助函数，它可以用于在组件中映射mutation内的方法，借助mapMutations生成对应的方法，方法中会调用commit去联系mutations。写法和mapState和mapGetters也类似：

 ...mapMutations({increment:'JIA',decrement:'JIAN'})；

mapActions是vuex中actions的辅助函数，它可以用于在组件中映射actions内的方法，借助mapActions生成对应的方法，方法中会调用dispatch去联系actions

...mapActions({incrementOdd:'jiaOdd',incrementWait:"jiaWait"})