Vuex

  149 ℃

CONTENT

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入一个插件
Vue.use(Vuex) // 使用这个插件

/*
	vuex的使用流程
	1.先在store.js文件中定义需要共享的全局参数、派生参数和改变这些参数的函数
	2.然后在组件中引入辅助函数
	3.然后添加这些辅助函数:
	(1)mapState和mapGetters放computed中
	(2)mapMutations和mapActionss放methods中
	4.添加完了之后,就不需要再从仓库中获取参数和函数,因为这些东西已经被映射到了组件上:
	(1)state和getters中的参数映射到组件的computed中
	(2)mutations和actions中的函数映射到了组件的methods中
	5.最后,直接this点这个参数名或者函数名,就可以使用仓库中的参数和函数
*/

/*
	创建一个store实例,相当于创建了一个仓库
	组件内部的data、computed和methods不是共享的,只能在定义这些选项的组件内部使用
	仓库中的state、getters、mutations和actions是共享的,所有的组件都能使用
*/
const store = new Vuex.Store({
	/* 
		单一状态树,存放全局共享的状态参数
		相当于公共的组件data
	*/
	state: {
		num: 100
	},
	/*
		派生状态参数,就是根据state中的某个参数派生出来的参数
		相当于公共的组件computed
		函数的第一个参数就是state
	*/
	getters: {
		num2(state){
			return state.num.toFixed(2)
		}
	},
	/*
		状态变更函数,用来直接改变state中的某个参数
		相当于公共的组件methods
		函数的第一个参数就是state,data是调用mutation时传入的参数
		不推荐在mutation中放异步操作,因为无法知道这个异步操作啥时候结束
	*/
	mutations: {
		changeNum(state,data){
			state.num = data
		}
	},
	/*
		变更分发函数,用来间接改变state中的某个参数
		相当于公共的组件methods
		第一个参数是store,可以解构出里面的一些属性和方法,例如commit

		与mutation的区别在于:
		1.不能直接改变state中的某个参数,而要在action中提交某个mutation,从而改变这个参数
		2.action中可以包含异步操作,并能通过导出一个promise对象得知这个异步操作啥时候结束
	*/
	actions: {
		changeNumAsync({commit},data){
			// 使用Promise封装这个异步操作
			return new Promise((resolve,reject) => {
				// 使用setTimeout模拟一个异步操作
				setTimeout(() => {
					commit('changeNum',data)
					resolve()
				},3000)
			})
		}
	}
})

// 导出整个仓库
export default store
0

Previous Post

评论: | NOTHING

暂无评论...