vuex状态管理

1.什么是vuex？

专门在vue中实现集中式状态（数据）管理的一个Vue插件，对vue中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，适用于任意组件间的通信

2.什么时候使用vuex?

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

3.vuex的使用

1.安装vuex

npm i vuex --save

2.js入口文件中引入store实例
src/main.js

 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
 
 //创建vue实例
 new Vue({
 	el:'#app',
 	render:h=>h(App),
 	store
 })

3.引入vuex并使用
src/store/index.js

  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)//使用
  
  export default new Vuex.Store({
  	state:{
  		sum:0
  	},
  	actions:{},
  	mutations : {
  		ADD(state,value){
  			state.sum+=value
  		}
  	},
  	getters:{},
  })

4.使用：

1. store： 读取数据
   第一种方式：this.$store.state.sum
   第二种方式：借助mapState生成计算属性，从state中映射数据。使用的时候直接插值语法{{sum}}

 import {mapState} from 'vuex'
 computed:{
 	...mapState({sum:'sum'})//对象写法
 	...mapState(['sum'])//数组写法（简写）
 }

2. commit：修改数据
   Mutation： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
   第一种方式：

methods:{
	increment(value){
 		this.$store.commit('ADD',3)
 	}
}

第二种方式：参数必须在调用时传递（实参）

<button @click="increment(n)">加+</button>

import {mapMutations} from 'vuex'
export default{
	data(){
		return{
			n:2
		}
	},
	methods:{
	//借助mapMutations生成对应的方法
		...mapMutaions({increment:'ADD',abc:'ABC'}),//对象写法
		...mapMutaions(['ADD']),//数组写法,此时调用函数时绑定函数为ADD，即<button @click="ADD(n)">加+</button>
 	}
}
 

3.Action： 类似于mutation，不同在于：

1. Action提交的是mutation，而不是直接变更状态
2. Action可以包含任意异步操作
   使用：
   1.store中定义actions

mutations:{
	ADD(state,value){
		state.sum+=value
	}
},
actions: {
  addWait (context,value) {
    setTimeout(()=>{
    	context.commit('ADD',value)
    },1000)
  }
}

2.触发：
第一种方式：this.$store.dispatch('action中的方法名',数据)
第二种方式：参数必须在调用时传递（实参）

 <button @click="incrementOdd(5)">等一秒钟再加+</button>

 import {mapActions} from 'vuex'
 methods:{
 	...mapActions({incrementOdd:'addWait'}),//对象写法
 	...mapActions(['addWait']),//数组写法,此时调用函数时绑定函数为ADD，即<button @click="addWait(5)">等等再加+</button>
 }

4.Getters： store的计算属性，用于将state中的数据进行加工

1. 加工数据

 getters:{
 	bigSum(state,getters){
 		return state.sum*10
 	}
 }

2. 使用数据:
   第一种方式： <span>乘积结果为：{{$store.getters.bigSum}}</span>
   第二种方式：借助mapGetter生成计算属性，从getters中映射数据。

 import {mapGetters} from 'vuex'
 computed:{
 	...mapGetters({bigSum:'bigSum'})//对象写法
 	...mapGetters(['bigSum'])//数组写法（简写）
 }

以上所有的映射函数mapState mapMutations mapActions mapGetters在多数据或状态时使用在项目中能帮助我们实现快速简便开发