20_Vue状态管理核心(Vuex)

最常用的核心概念包含:
State、Getter、Mutation、Action

Getter
对Vuex中的数据进行过滤
import {createStore} from 'vuex'

export default createStore({
	state:{
		counter:0
	},
	getters:{
	   getCount(state){
		   return state.counter>0?state.counter:"counter小于0，不符合要求"
		}
	}
})

import {mapState,mapGetters} from 'vuex';
computed:{
	...mapGetters(["getCount"])
}

Mutation
用事件调用
更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数

import {createStore} from 'vuex'

export default createStore({
	state:{
		counter:0
	},
	getters:{ 
	},
	mutations:{
		setCounter(state,num){
			state.counter += num
        }
    }
})

Ation
Action类似于mutation,不同在于：

 - Action提交的是mutation,而不是直接变更状态
 - Action可以包含任意异步操作
import {createStore} from 'vuex'

export default createStore({
	state:{
		counter:0
	},
	getters:{
	   getCount(state){
		   return state.counter>0?state.counter:"counter小于0，不符合要求"
		}
	},
	mutations:{
		setCounter(state,num){
			state.counter += num
        }
    },
    actions:{
		asyncSetCount({commit}){
			axios.get("http://iwenwiki.com/api/generator/list.php")
			.then(res=>{
				commit("setCounter",res.data[0])
			})
		}
	}
})

import {mapState,mapGetters} from 'vuex';
computed:{
	...mapGetters(["getCount"])
}