一、概念

vuex是vue.js应用开发的状态管理模式。vuex就是为了提供一个在多个组件间共享状态的插件

二、状态管理

1. 单界面状态管理

单个组件是如何进行管理的呢？
在这里插入图片描述
如上图：
State:状态
View:视图层，可以针对State的变化，显示不同的信息
Actions:用户的各种操作如点击、输入等会导致状态的改变

<template>
	<div class="test">
		<div>当前计数:{{counter}}</div>
		<button @click="increment">+1</button>				
		<button @click="decrement">-1</button>
	</div>
</template>
<script>
export default {
	name:'HelloWorld',
	data(){
		retrun {
			counter:0
		}
	},
	methods:{
		increment(){
			this.counter++
		},
		decrement(){
			this.counter--
		}
	}
}
</script>

这个案例就涉及到了状态管理，counter需要某种方式被记录下来，也就是我们的State，counter目前的值需要被显示在界面中，也就是View部分，界面发生某些操作时(这里是点击),需要更新状态，也就是Actions
这是vue已经帮我们做好了单个界面的状态管理，单个界面可以看作独立的房间，状态1/状态2/状态3在自己的房间里自己管理自己用是可以的，但是其它的房间用不了你房间里的状态。

2.多界面状态管理

我们希望可以将一些公共的状态交给一个大管家来统一帮助我们管理，不管哪个地方需要用到这些状态都可以访问得到，vuex就是为我们提供大管家的工具。我们需要做的就是将共享的状态抽取出来，交给大管家统一进行管理，到时候每个视图按照规定进行访问和修改。
在这里插入图片描述

三、vuex的使用

1、安装插件
2、创建store对象
3、导出store对象进行挂载
详细步骤：
(1)先创建一个文件夹store，并且在其中创建一个index.js文件，在index.js文件中写入如下代码：

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 安装插件
Vue.use(Vuex)
// 2. 创建store对象
const store = new Vuex.Store({
    state:{
    	count:0
    }
    mutations:{
    	increment(state){
    		state.count++
    	},
    	decrement(state){
    		state.count--
    	}
    }
})

// 3. 导出store对象
export default store

(2)我们让所有的Vue组件都可以使用这个store对象,来到main.js文件，导入store对象，并且放在new Vue中,这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了。

import Vue from 'vue'
import App from './App'
import store from './store/index'
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

(3)使用vuex中的count
通过this. $s t o r e . s t a t e . 属性的方式来访问状态通过 t h i s .$ store.commit(‘mutation中方法’)来修改状态

<template>
	<div class="test">
		<div>{{count}}</div>
		<button @click="increment">+1</button>				
		<button @click="decrement">-1</button>
	</div>
</template>
<script>
export default {
	name:'HelloWorld',
	computed:{
		count:function () {
			return this.$store.state.count
		}
	},
	methods:{ 
		increment () {
			this.$store.commit('increment')
		},
		decrement () {
			this.$store.commit('decrement')
		}
	}
}
</script>