vuex (概念、几部分组成、map高级语法、数据持久化)

vuex (概念、几部分组成、map高级语法、数据持久化)

vuex概念：

vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex由哪几部分组成：vuex由state、mutations、actions、getters、modules五部分组成。

state：state用于存储网页中对应组件的所有数据

mutations：mutations是一个唯一能够修改state的操作。我们如果想要改变state,就直接去创建一个mutations,然后提交（commit）这个mutation即可。一般我们会在action进行操作。

actions：actions简单来说就是可以包含异步操作

getters：getters类似于vue中的计算属性用于从state中动态获取相关数据对state数据进行计算（会缓存）

modules：modules就是模块化管理store（仓库），而且每一个模块拥有自己的 state、mutation、action、getter

vuex数据持久化

vuex数据持久化结合了localStorage实现数据状态持久化

1.首先安装 npm install vuex-persistedstate

2.在store.js中

import createPersistedState from 'vuex-persistedstate'
	const state={
	user:{},
}
 export default new Vuex.Store({
 	state,
	getters,
	actions,
	mutations,
	plugins:[createPersistedState(
	storage: sessionStorage, 
	key: "token"
	)]//会自动保存状态，刷新也还在
});

vuex关于map的辅助函数（又称四大金刚）

四大金刚：mapState、mapGetters、mapMutations、mapAction

如果要使用四大金刚时首先要在使用的页面中引入

import { mapActions, mapGetters, mapMutations, mapState } from ‘vuex’。使用哪个就引用哪个

mapState

首先引入import { mapState } from 'vuex‘

有三种用法

1. 对象

computed:mapState({
	//箭头函数
	count:state=>state.count,
	//在这里为了能够使用this获取局部变量localCount,必须使用常规函数
	return state.count+this.localCount
})

如果使用箭头函数，当vuex的state和当前组件的state，含有相同的变量名称时，this获取的是vuex中的变量，而不是局部变量

2.数组

当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组。

computed:mapState([
	'count'
])

3.对象展开运算符

mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用，通常我们需要一个工具函数将多个对象合并为一个，使我们可以将最终对象传给computed属性。

computed:{
	localComputed(){},
	...mapState({})
}

mapGetters

mapGetters将store中的getter映射到局部计算属性

computed:{
	...mapGetters({
		'oneGetter',
		'anotherGetter'
	})
}

mapMutations

使用mapMutations辅助函数将组件中的methods映射为store.commit调用

methods:{
	//将this,tips映射成this.$store.commit('tips')
	...mapMutations(['tips'])
}

mapAction

使用mapActions辅助函数将组件的methods映射成store.dispath调用

methods:{
	//将this,tips映射成this.$store.commit('tips')
	...mapActions(['tips'])
}