vuex

vuex

作者:严孝孝

1.vuex介绍

(1)什么是vuex?

	官网: vuex是一个专为vue.js应用程序开发设计的状态管理模式
	vuex提供统一,全局的状态管理方式
	vuex当成整个app的全局数据, 在所有组件内起作用

(2)vuex的作用是什么, 解决的问题是什么?

	写项目有些数据是跨组件, 需要多个组件共用数据
	需要把一个数据, 从A传递到B界面,  这两个界面没有关系
	解决方式: 把每个界面共用的数据, 提取出来,放在vuex中, 实现统一管理

(3)举例说明

	标签栏中当前项 - 使用vuex
	电商项目 - 购物车(10)
	实现统一的网络数据请求
	任意两个之间传值
	界面主题(黑夜)

(4)官网

	https://vuex.vuejs.org/zh/

2.vue的核心概念

	State 		存储的状态(理解: 这是多个界面共用的数据)
	Getter  	获取数据(理解: 写上方法, 利用这些方法, 获取数据)
	Mutation 	同步修改数据(理解: 普通数据,通过Mutation修改)
	Action 		异步修改数据(理解: 目前使用只有网络数据是异步, 网络)

3.vuex使用

vuex模板框架

	Step1: 安装vuex的npm包
		cnpm install vuex --save
	Step2: 在src目录中新建一个store文件夹, 其中新建一个store.js
		注意: 目录和文件名, 可以变成自己的
	Step3: 先写vuex框架 - 导入需要的库
	Step4: 定义store, 要导出store
		注意: 要使用 export default导出store
	Step5: store中添加state
	Step5: store中添加getters		
	Step5: store中添加mutations
	Step6: store中添加actions
1.main.js加载这个store
	Step1: 首先在main.js中导入store
		import store from '@/store/store'
	Step2: 在vue实例设置store
		store:store
		作用: 以后再vue组件中, 通过 this.$store获取对象	
2.组件中使用store
	Step1: 如何在js中使用store
		this.$store.getters.getTabIndex	
	Step2: 如何在模板中使用
		{{$store.getters.getTabIndex}}
	Step3: 如何修改这个值
		this.$store.commit("setTabIndex",100)
	Step4: tabIndex使用一下	
3.如何在store请求异步数据(网络数据)
	Step1: 写了个函数downloadList, 发起网络请求
	Step2: 核心: 当数据下载完成后
			通过 this.$commit() 修改数据	
		注意: 所有组件中用到这个数据的, 自动修改	
4.如何通过计算属性computed简化获取方式
	computed:{
		list(){
			return this.$store.getters.getListData
		}
	}
	作用: 调用 this.	list 实际上使用this.$store.getters.getListData
		使用 {{list}} 起始使用 {{$store.getters.getListData}}