VUEX

vuex

vuex是专门为vue.js应用程序开发的状态管理模式，可以理解为在data中的属性，需要共享给其他组件使用的部分，采用集中式存储管理应用的所有组件的状态，并以相应的规则状态以一种可以预测的方法发生改变。

简单的理解就是在state中定义了一个数据之后，可以在项目的任何一个组件中进行获取和修改，并且修改可以得到全局的响应变更。

为什么需要VUEX

单向数据流：state数据更新视图—用户操作通过action更改state。

在应用中如果遇到多个组件共享状态

• 1）多个视图依赖同一状态：传参的方法对从多层嵌套的组件会非常繁琐，且兄弟组件状态无法传递。
• 2）不同视图更改同一状态：通过父子组件直接引用或通过事件变更等方法，代码维护较为困难。

核心概念

• State：this.$store.state.XXX 取值
  提供响应式数据 —mapState
• Getter：this.$store.getters.XXX取值
  借助计算属性computed实现缓存—mapGetters
• Mutation：this.$store.commit(“XXX”)赋值
  更改state的方法—mapMutations
• Action：this.$store.dispatch(“XXX”)赋值
  可以触发mutation
• Module：this.$set动态添加state到响应式数据中。

（1）state

存储状态，vuex时单一状态树，使用一个对象即可包含全部的应用层级状态，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态。

vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中。使用mutations和actions操作vuex中的state值。

Vuex官方API提供了一个getters，和计算属性computed一样，来实时监听state值的变化（最新状态）

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，我们可以使用mapState辅助函数帮助我们生成计算属性

（2）mutations

同步，该对象可以放改变state的初始值的方法，具体的用法是给mutation其中的方法传入参数state或者额外的参数，然后利用vue的双向数据驱动进行值的改变，同样将定义好的mutation放入vuex.store中。

每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是我们实际进行状态更改的地方，接收state作为第一个参数。

（3）actions

该方法可以包含任意异步的操作，其中的方法是用来异步触发mutations里的方法，action里面自定义的函数接收一个context参数和要变化的形参，context和store实例具有相同的方法和属性，可以执行context.commit(’’)
在外部组件中进行全局执行action里面的方法的时候，需要执行this.$store.dispatch('functionName')

（4）getter

对数据获取之前的再次编译，Vuex可以在store中定义“getter”，类似计算属性，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter会暴露store.getters对象，可以通过以属性的形式访问这些值：store.getters.doneTodos

mapGetters辅助函数将store中的getter映射到局部计算属性。

（5）module

使用单一状态树，应用的所有状态会集中到一个 比较大的对象，当应用变得复杂的时候，store对象可能变得相当臃肿。vuex允许我们将store分割成模块，每个模块有自己的state、mutation、action、getter甚至是嵌套子模块。

对于模块内部的mutation和getter，接收的第一个参数是模块的局部状态对象。

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  }
}

使用

• （1）安装vuex：npm i vuex
• （2）在入口文件中引入vuex

import Vuex from 'vuex'

Vue.use(Vuex) 
const store = new Vuex.Store{(
	state:{
		count:0
	},
	mutations:{
		increment(state){
			state.count++;
		}
	},
	//异步相关操作
	actions:{
		increment({state}){
			setTimeout{()=>{
				state.count++;
			},3000}
		}
	},
	getters:{
		doubleCount(state){
			return state.count + 2;
		}
	}
)}

new Vue({
	store
})

//触发变更方法mutation
this.$store.commit('increment');
//Action提交的是mutation，不直接变更状态，使用dispatch触发
this.$store.dispatch('increment');
//getter方法获取
this.$store.getters.doubleCount;