vuex（状态管理工具）

2022-02-23 18:32:23 阅读：181 来源： 互联网

标签：状态 ... getters 管理工具 addOne state increment vuex store

vuex是什么？

	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
	它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
	专门在vue中实现集中式的状态数据管理工具，对多组件中共享状态数据进行集中式的管理，
	也是一种组件间的通讯方式，切适用于任意组件

什么情况下我应该使用 Vuex？

	-   多个视图依赖于同一状态。
	-   来自不同视图的行为需要变更同一状态。

vuex的核心

	- State
	- Mutation
	- getter
	- action
	- module

State：

	例子：
	state:{
		key: value
	}
	state是vuex的单一状态树，就是用来储存数据的地方，本质就是一个对象
	我们可以通过 store.state.key 来读取state中的数据，也可以使用 mapState 辅助函数
	使用方式 在computed中 
	...mapState({key:'value'})或...mapState(['value'])
	key:组件中调用的值名，value是state中的状态（数据）名

getter：

	例子：
	getters:{
		addOne: (state)=>{
			return state.数据名 +1;
		}
	}
	getter相当于vue中的计算属性，传入一个state对state中的数据进行加工，然后返回一个可以使用的数据
	我们可以通过 store.getters.addOne 来读取getter中的数据，也可以使用 mapGetters 辅助函数
	使用方式 在computed中 
	...mapGetters ({addOne :'addOne'})或...mapGetters (['addOne'])
	addOne:getters中的数据名

Mutation：

	例子：
	mutations: {
	  increment (state, payload) {
	    state.count += payload.amount
	  }
	}
	payload：载荷在大多数情况下，载荷应该是一个对象
	mutation 必须是同步函数。
	使用方式 在methods中 
	创建一个方法，通过store.commit('increment , 对象)来调用它，用于修改state中的数据
	...mapMutations({increment :'increment '})或...mapMutations(['increment '])
	但是通过mapMutations函数调用没有办发传递参数，只能在绑定事件中调用@click = increment(参数)

action：

	例子：
	actions: {
	    increment (context) {
	      context.commit('increment')
	    }
	}
	Action 类似于 mutation，不同在于：

	-   Action 提交的是 mutation，而不是直接变更状态。
	-   Action 可以包含任意异步操作。
	通过 `context.state` 和 `context.getters` 来获取 state 和 getters
	Action 通过 `store.dispatch` 方法触发
	Action中是可以进行异步操作的
	使用方式 在methods中 
	创建一个方法，通过 store.dispatch('increment')来触发它
	...mapActions({increment :'increment '})或...mapActions(['increment '])

module：

	作用：用来分割store，当store过大时造成结构臃肿，就使用mutations来将store拆分
	每一个mutations中都有state,getters,mutations,actions
	这个时候我们在组件中调用模块中的state,getters,mutations,actions的时候就要store.模块名才能找到
	通过添加 `namespaced: true` 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

标签：状态,...,getters,管理工具,addOne,state,increment,vuex,store
来源： https://blog.csdn.net/twilightLeaves/article/details/123096449

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9