Vuex的基础知识

一，Vuex的概述

之前学习的组件间传值：

然而在实际开发过程中，组件间的传值远远比这些复杂，所以又引入了Vuex。

二，Vuex的基本使用

三，使用vuex的计数器小案例地初始化

<template>
  <div >
     <my-addition></my-addition>
	 </hr>
	 <my-subtraction></my-subtraction>
  </div>
</template>

<script>
	//导入两个组件
	import Addition from './components/Addition.vue'
	import Subtraction from './components/Subtraction.vue'
	export default{
		data(){
			return{}
		},
		//将这两个组件注册为根组件的子组件
		components:{
			'my-addition':Addition,
			'my-subtraction':Subtraction
		}
	}
</script>

<style>
</style>

四，Vue的核心概念—State

也就是说，各个组件都能接收到的数据，就偷偷放在这里！！
那么新的问题来了，各个组件又要怎样才能获取到这个数据呢？卖身吗？显然不是！！

// 2.创建Store对象并导出
export default new Vuex.Store({
	//全局共享的数据放置在state里面
  state: {
		count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

而在template中，this指向本身这个vue实例，所以this可以省略：

<template>
	<div>
		<h3>当前最新的count值为：{{$store.state.count}}</h3>
		<button>-1</button>
	</div>
</template>

这样处理之后，就可以直接把count当作该组件的计算属性直接使用了！
显然，在大量使用count的时候，这个方法可以少些很多代码：

<template>
	<div>
		<h3>当前最新的count值为：{{count}}</h3>
		<button>+1</button>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{}
		},
		computed:{
			//这样写之后，就可以把count当作本组件的计算属性直接使用了
			...mapState(['count'])
		}
	}
</script>

<style>
</style>

五，vuex的核心概念—Mutation

按之前的思路，修改数据是采用这种方法，但是这种方法不推荐。因为随着项目越写越大，当我们想查看是哪个不要脸的组件修改了公共数据，就得一个组件一个组件地去翻，去查找，烦人！！
于是推荐使用mutation来完成store中数据的更改，因为mutation就放置在state旁边，要查找不是很容易嘛！！

// 2.创建Store对象并导出
export default new Vuex.Store({
	//全局共享的数据放置在state里面
  state: {
	count:0
  },
  mutations: {
	 add(state){
		 //参数是state对象 ，既然获取到这个对象，就可以用state.count访问其中的数据
		 state.count++
	 }
  },
  actions: {
  },
  modules: {
  }
})

<template>
	<div>
		<h3>当前最新的count值为：{{count}}</h3>
		<button @click="handle">+1</button>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{}
		},
		computed:{
			//这样写之后，就可以把count当作本组件的计算属性直接使用了
			...mapState(['count'])
		},
		methods:{
			handle(){
				//通过this.$store.commit（函数名）调用store中的对应函数
				this.$store.commit('add')
			}
		}
	}
</script>

<style>
</style>

r让它自增加3

<template>
	<div>
		<h3>当前最新的count值为：{{count}}</h3>
		<button @click="handle">+1</button>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return{}
		},
		computed:{
			//这样写之后，就可以把count当作本组件的计算属性直接使用了
			...mapState(['count'])
		},
		methods:{
			handle(){
				//通过this.$store.commit（函数名）调用store中的对应函数
				this.$store.commit('add',3)
			}
		}
	}
</script>

<style>
</style>

而如果在mutation中执行异步操作，容易出问题，所以，又引出了Action

六，vuex核心概念—Action

七，vuex核心概念—Getter