VUEX笔记

VUEX笔记

1. state

   state:{
   	ip:''
   }
   

2. getters

   const getters = {
   	ip:state=>state.ip
   }
   

3. mutations

   同步操作 this.$store.commit()

   mutations:{
   	SET_IP:(state,ip)=>{
   		state.ip = ip
   	}
   }
   

4. actions

   异步操作 this.$store.dispatch()

   Action 类似于 mutation，不同在于：

   • Action 提交的是 mutation，而不是直接变更状态。

   • Action 可以包含任意异步操作

     actions:{
     	increment({commit}){
     		commit('SET_IP')
     	}
     }
     

5. modules

vuex中的辅助函数

https://blog.csdn.net/AkeDuan/article/details/123574487

1.mapState,mapGetters

import { mapState,mapGetters } from 'vuex'

export default{
	computed: {
		...mapState({
			//箭头函数使代码更简练
			count: state => state.count
			// 传字符串参数‘count’ 等同于·state=>state.count·
			countAlias: 'count'
			
			//为了能够使用‘this’获取局部状态，必须使用常规函数
			countPlusLocalState(state){
				return state.count + this
			}
		}),
		...mapGetters({
		//把‘this.doneCount’ 映射为 ‘this.$store.getters.doneTodosCount’
			doneCount: 'doneTodosCount'
		})
	}
}

当定义的属性名与state/getters中的名称相同时，可以传入一个数组

//定义state
const state = {
	count:1
}

//在组建中使用辅助函数
computed:{
	...mapState(['count'])
	...mapGetters(['count'])
}

2.mapMutations,mapActions

methods:{
	...mapMutations({
	//将‘this.add()’ 映射为 ‘this.$store.commit('increment')’
		add:'increment'
	})
	//当属性名与mapMutations,mapActions中定义的相同时，可以传入一个数组
	...mapMutations([
	//将‘this.increment()’ 映射为 ‘this.$store.commit('increment')’
        'increment',
    //将‘this.incrementBy(amount)’ 映射为 //‘this.$store.commit('incrementBy'，amount)’
        'incrementBy'  //`mapMutations` 也支持载荷：
	])
	...mapActions({
		//将‘this.add()’ 映射为 ‘this.$store.dispatch('increment')’
		add:'increment'
	}),
	//当属性名与mapMutations,mapActions中定义的相同时，可以传入一个数组
	...mapActions([
	//将‘this.increment()’ 映射为 ‘this.$store.dispatch('increment')’
        'increment',
    //将‘this.incrementBy(amount)’ 映射为 //‘this.$store.dispatch('incrementBy'，amount)’
        'incrementBy'  //`mapMutations` 也支持载荷：
	])
}

总结：

• mapState 与 mapGetters 都用computed来进行映射

• 在组件中映射完成后，通过this.映射属性名 进行使用

• mapMutations与mapActions都在methods中进行映射

• 映射之后变成一个方法

多个modules

• 在不使用辅助函数时

this.$store.commit('app/addCount')

• 在使用辅助函数，辅助函数的第一个参数 给定命名空间的路径

computed:{
	...mapState('some/nested/module',{
		a:state=>state.a,
		b:state=>state.b
	})
},
methods:{
	...mapActions('some/nested/module',{
		'foo',// this.foo()
		'bar'//this.bar()
	})
}

或者使用createNamespacedHelpers 函数来创建一个基于命名空间的辅助函数

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') //给定路径

//使用方法与之前相同
export default {
    computed:{
    //在 ‘some/nested/module’ 中查找
        ...mapState({
            a:state=>state.a,
            b:state=>state.b
        })
    },
    methods:{
    //在 ‘some/nested/module’ 中查找
        ...mapActions(['foo','bar'])
    }
}