猫说

vuex

2017/12/25 vue

vuex简介

vuex核心概念

1、store：类似容器，包含应用的大部分状态，一个页面只能有一个store，状态存储是响应式的，不能直接改变store中的状态，唯一的途径是提交mutations

	let store = new Vuex.Store({
		state:{}
		...
	})

	//vue中获取
	//引入文件，注入到vue根实例里面
	
	import store from './store'
	new Vue({
	  el: '#app',
	  router,
	  store,
	  components: { App },
	  template: '<App/>'
	})

2、state：包含所有应用级别状态的对象（数据）

	state:{
		count:100
	}

	//vue中获取
	this.$store.state.count

3、getters：在组件内部获取store中的状态的函数，在vuex里面做逻辑判断的地方，类似vue里的computed

	state:{
		count:100
	},
	getters:{
		filterCount(state){
			return state.count>=120 ? 120 : state.count
		}
	}

	// vue 里面获取

	this.$store.getters.filterCount

4、mutations：唯一修改状态的事件回调函数,mutation和state的数据必须是同步的，异步的话需要用到actions

	mutations:{
		fnKey(state){state.count++}
		...
	}

	// vue中提交mutation,
	//传参的话是第二个参数，接受也一样，官方推荐传参用对象
	methods:{
		eventName(){
			// this.$store.commit("fnKey")
			this.$store.commit({
				type: 'fnKey',
				data:xxx
			})
		}
	}

5、actions：包含异步操作，提交mutation改变状态,当需要异步修改state的状态的时候需要先提交mutation，用mutation改变，action必须接收一个参数为context

	actions:{
		funName(context){
			context.commit('mutationEventName',{n:1})
		}
	}

	//ES6解构
	actions:{
		funName({commit}){
			commit('mutationEventName',{n:1})
		}
	}

// vue 触发action
this.$store.dispatch("actionName") actions的方法接收一个参数`context`，context和实例的东西是一样的但并不是同一个东西，

//打印context的时候显示有下面这些属性commit、dispatch、getters、rootGetters、rootState、state
1、commit是用来提交mutation
2、dispatch用来触发另一个actions，触发的时候可以传一个参数对象过去
3、state：拿到当前的状态
4、getters：

6、modules：将store分割成不同的模块

vuex 辅助函数

1、 mapState

2、mapGetters

3、mapMutations

4、mapActions

上面的方法使用方式都一样。

	// 在需要使用的vue组件中引入vuex
	import {mapState,mapGetters,mapActions} from 'vuex'

	// 使用
	//方式一
	computed：mapState({
		// 几种方式
		num:state => state.count
		num:'count'
		num(state){
			return state.count
		}
	})
	//方式二
	computed:{
		ad:{return 123},
		...mapGetters({
			n2:'count2' // count2是在getters里面定义的方法名字
		}),
		...mapState(['count'])
	}

	//methods
	methods:{
		...mapActions({
			事件名：'action方法名'
		})
	}
mapActions/mapMutations需要传参的时候需要在行间传参

	<input @click="eve({参数名:值})"></input>
	// vue 里面触发
	methods:{
		...mapMutations({
			事件名：'mutationName'
		})
	}
	// vuex里面
	mutations:{
		mutationName(state,payload){
			// 指定一些操作，可以拿到行间设置的键值
		}
	}

Search

    Table of Contents