Vuex笔记

基于vuex官方文档提供的模块化和命名空间的文件结构，进行开发页面级别调用vuex中状态和方法如下：

（1）获取vuex中的状态属性

//1.路由数据routerList放到了vuex进行管理，对于routerList数据的获取请求也写到了vuex中
<template>
</template>
<script>
import { mapState,mapMutations,mapGetters,,mapActions } from "vuex"
export default {
	name:'',
	data(){},
	computed:{
		...mapState({
			routerList:(state)=>state.menuList.routerList,//注意在使用了命名空间情况下，要在对应的属性名前写上模块名，没有开启命名空间时（该属性默认为vuex的全局属性），直接忽略前边的模块名menuList即可
		}),
		...mapGetters({
			getCache: "formCache/getCache",
		})
	},
	methods:{
	}
	
}
</script>

（2）想要调用vuex中的方法时

//和案例一中一样：引入mapMutation映射方法后，直接将对应模块下的vue方法映射为当前组件的方法，这样就可以直接在当前页面中当成普通方法调用
methods:{
	...mapActions({
		getCurrentDateHttp:"data/getCurrentDateHttp",
	}),
	...mapMutations({
         setTaskListActive:'task/setTaskListActive'
     })
}

需求demo：
1.在单页面中使用的数据是全局存储管理的。

（1）对应Vuex的模块中定义相关state，getter、mutation、action
（2）页面调用
方式一：通过全局Vue实例拿到触发
this.$store.state.xxxMoudle.xxxState
this.$store.getters['xxxMoudle/xxxGetter']
this.$store.commit('xxxMoudle/xxxMutation',{age:"22"});
this.$store.dispatch('xxxMoudle/xxxAction',{name:"ddd"});
方式二：使用vuex提供的辅助函数(全家福写法)
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export deafult{
	computed:{
		...mapState({
			currentData:state=>state.app.data,
			currentCount:state=>state.app.count,
		}),
		...mapGetters({
			user:"getUserInfo",
		})
	},
	methods:{
		...mapMutations({
			currentMethod:"xxxMoudle/xxxMutation",
		}),
		...mapActions({
			currentMethod2:"xxxMoudle/xxxAction",
		})
	}
}