Vue中如何下载并使用Vuex状态管理器

上一篇总结了一下组件之间传值的三种基本方法，这里来说一下如何下载并使用官方定义的状态管理器(Vuex)

一.安装
安装方法有很多，这里不过多说明，在项目文件夹中进入命令行工具输入：
npm install vuex

二.配置
在工程目录中的src文件夹中创建store文件夹，在该文件中创建一个index.js文件
然后创建一个仓库，代码如下：

import Vue from "vue"			//因为是基于vue所以先配置引入vue
import Vuex from "vuex"			//之后配置引入vuex
Vue.use（Vuex）					//配置完成

//完成后暴露并创建一个仓库：	
export default new Vuex.Store({
//初始化状态对象	
	state:{
		自定义数据名称:" "
	},
//自定义函数事件
	mutations:{
		自定义事件名称(state,传参){
			state.自定义数据名称=传参
		}
	}
})

三.引入
在工程目录src文件夹下的main.js中引入之前创建的store中的index.js文件

import store from './store'		//这里因为vue中的定义配置,自动寻找index.js文件

//之后再将我们定义好的仓库放在全局vue对象中
new Vue({
  el: '#app',
  router,
  store,		//因为ES6的语法定义此处代码等价于：store：store
//完成
  components: { App },
  template: '<App/>'
})

四.具体使用
在需要用到仓库的文件中，以事件驱动的方式（例如：click）驱动仓库中自定义的事件

使用时注意在vue中定义的调用仓库方法为 this.$store
调用this.$store.commit方法触发自定义函数，并更改仓库状态
点击事件（）{
	this.$store.commit（"之前定义的事件名称",要放到仓库中的值）
}
调用this.$store.state方法访问对象,并取仓库中的物品
	this.$store.state.仓库中自定义的数据名称