Vue - Vuex 在项目中运用总结

参考文档：
vue cli-3.0 配置	— https://juejin.im/post/5c0b8d74f265da6115109d68
vuex文档 —	— http://www.php.cn/manual/view/32653.html
vuex方法说明	— https://segmentfault.com/a/1190000012408493
watch监听 —	— https://www.jianshu.com/p/dc5d0f7daa88
全局路由拦截token	— https://blog.csdn.net/sleepwalker_1992/article/details/82974703

一、vuex 在 vue.js一书中的介绍（第261页）：

vuex 是作为 Vue 的一个插件来使用的，这样就可以更好的管理和维护整个项目的组件状态。

在实际业务中，经常有跨组件共享数据的需求，因此 Vuex 的设计就是用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件应用更加高效。

---

二、介绍：

如果把 vuex 比如成一个 “ 前端数据库 ”，那么：

State	就是数据库
mutations	就是我们把数据存入数据库的 API，用来修改state 的
getters	是我们从数据库里取数据的 API，只能获取不能修改数据库
actions	后端从前端拿到了数据，总要做个处理吧，处理完了再存到数据库中。其实这就是

再来看看 vuex 的数据流：
通过action处理数据 ------- 然后通过mutation 把处理后的数据放入数据库（state）中 ------- 最后谁要用就通过getter从数据库（state）中取

方法运用：

1、mutations：
mutaions理解为 store 中的 methods （方法集合）。

---

2、action 和 mutation 类似，区别在于：

• action 不改变状态，只提交(commit) 给 mutation。
• action 可以包含任意异步操作。
• actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象。

简单来说，就是你想改变state的值，就用mutations，如果你想用方法，就用actions。

3、getters 属性理解为 所有组件的 computed 属性 , 也就是计算属性。

---

三、watch 实时监听vuex 仓库中的数据变化：

watch不能鉴听非vue机制存放的数据，所以webscorket获取到的数据不能存在 localStorage 或者 sessionStorage 里面

<script>
	import local from './common/api/localSession.js'
	import { mapState, mapMutations, mapActions, mapGetters } from "vuex"
	import Layout from "@/layouts";

	export default {
		name: "App",
		components: {
			Layout
		},
		data() {
			return {
			}
		},
		//实时监听data中的数据变化
		watch: {
			'user_SessionId': {
				handler: function(newer, older) {
					if (newer == null) {
						return
					} else {
						// methods中定义好的获取数据列表的方法
						//alert(newer)
						this.onUserOutClick(newer);
					}
				},
		　　　　deep: true   // 开启深度监听
			},
		},
		//监听属性 类似于data概念
		computed: {
			//取
			...mapGetters("localSession", ["user_SessionId"]),
		},
		//页面初始化- 挂载完成（可以访问DOM元素）
		mounted() {
		},
		//方法
		methods: {
			onUserOutClick(type) {
				if(type === '0') {
				}
			},
			
		},
		beforeCreate(){ 
			//beforeCreate()，created(), beforeMount(), mounted() 都可以
			console.log('app beforeCreate');
		},
	};
</script>