一、背景介绍

随着我们相关业务复杂的增加，我们每个模块、组件都需要有数据状态的管理，再有组件以及模块间的数据共享和传输问题，数据变化影响的组件和模块也越来越多，一系列的连锁反应就直接的增加了我们在定位问题和解决问题的难度。

幸运的是，Vue的官方其实已经为我们提供了相应的解决方案，就是Vuex。他的作用就是帮助我们集中的管理数据状态，这样就能让我们更容易地进行数据在组件和模块间的相处传递和数据的交互。

二、vuex的图示

在使用vuex之前，我们先通过一张图来看一下 Vuex 的运行机制过程，这样能让我们更快的上手和熟悉Vuex的使用。

先了解几个概念

• State

????我们可以简单地理解为是数据中心（仓库），就像数据库储存着需要的所有数据和数据的状态。

• Store

我们可以理解为是管家（工具），所有数据的存入和取出都由它来管理和调度。

• Getter

????我们可以理解为store 的数据取出工具类, getters 的优点：返回值（数据）会被缓存起来，当它的值发生改变才会更新，并通知相关使用的组件状态及时地更新。

• Mutation

????我们可以理解为store 的数据保存工具类,我们可以通过mutations 对需要保存的数据进行存储。

• Action

????我们可以理解为Action 是 mutation 对数据保存和变更状态的方法。action 通过异步的方式和同时对多个mutation数据的状态更新进行操作，我们可以简单认为他是一个异步代理可以对多个数据进行数据状态的更新。

三、Vuex的安装引用

npm install vuex --save

• Vuex实例注册

我们需要在src目录下新建 store.js文件 ，然后注册vuex同时声明我们的state、mutations和actions备用，相关代码如下：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({  
  state: {},  
  mutations: {}, 
  actions: {}
});

• Vuex实例引用

我们在 main.js 文件里，在注册的Vue实例里对store文件进行引用，这样我们就可以在我们的相关模块和组件中利用this.$store访问store实例了，相关代码如下：

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
new Vue({  
  store,  
  render: h => h(App)
}).$mount("#app");

四、初始化数据

我们可以在创建store的时候先初始化一部分原始数据，供我们使用。相关代码如下：

export default new Vuex.Store({  
  state: {    
    userName: '张三', 
    loginStatus: 0
  },
	mutations: {}, 
  actions: {}
});

这样我们就可以在不同的地方进行取用这些数据，相关代码如下：

<template>  
  <div>    
  	<span>{{ userName }}</span>  
	</div>
</template>
  <script>
      export default {  
				computed: {    
          userName() {      
            return this.$store.state.userName;   
          } 
       }}
  </script>

总结

今天简单的介绍了一下为什么使用vuex和vuex的安装引用和简单的在页面中如果使用store中保存的初始化数据。后面我们在详细的介绍vuex的使用已经运行机制。