Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（官网地址:https://vuex.vuejs.org/zh/）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　　换成我们大白话来说：Vuex就是一个状态管理模式，可以简单的理解为一个全局对象，然后我们可以修改这个全局对象里面的属性或者添加方法，但是我们不能像传统JS的那种直接赋值形式来修改，我们必须得按照Vuex给我们提供的规则来修改；

　　Vuex的存在就是应用于解决各个组件之间传值的问题的，说白了就是看我们传统的vue父子组件传值麻烦以及弊端所给我们带来的福利；这一点官网说的很清楚：

 　　提示：本文将以模块导入导出的形式来使用vuex，本文略微有点长，希望耐心的看完，当然有条件的话跟着敲一遍效果会更好！

　　Vuex一共给我们提供了四大对象，分别是state、mutations、getters、actions；

　　state：Vuex中的数据源，我们所需要的公共数据都是存储在这，可以简单理解为一个透明的仓库，可以通过this.$store.state.变量名来访问这个仓库里面的数据源；

　　mutations：mutations相当于是这把仓库的钥匙，只有通过提交mutations才能进行修改数据源操作，也就是说你想更改这个仓库里面的数据就只有通过mutations来进行修改（this.$store.commit("方法名")）；

　　getters：getters类似于vue中的computed属性，getters的返回值会根据state中所依赖的值的状态修改来进行改变，如果getters中依赖的state中的值没有变化，直接读的是缓存，如果有变化这里也会发生相应的变化，可以用于监听state的值的变化；这里的getters可以理解为state这个仓库的保安，如果state的数据发生变化，这个保安就会采取相应措施进行相应变化，如果没有发生变化，则啥事没有则继续混吃等死（哈哈哈，不知道比喻恰不恰当，但是是这个意思，大家理解就好，别杠精）

　　actions：actions和mutations很类似，只是mutations官方规定只能进行同步操作，而actions里是可以进行异步操作的；也就是说我们需要进行异步操作需要在actions中来进行，然后就是actions提交的是mutations，而不是直接修改状态的，也就是说进入这个仓库修改数据，要先去拿到钥匙才能修改，所以actions是提交给mutations再去执行mutations的方法的；

　　state的用法：

　　　　首先我们新建一个项目，搭建vue的环境我们这里就不多赘述了，毕竟本文是讲述vuex的；先在项目中安装vuex：

　　　　安装vuex命令：npm install vuex --save

　　　　安装完vuex之后我们在src的目录下新建一个vuex文件夹，同时在vuex文件夹中新建一个store.js文件：

　　　　store.js:　　

import Vue from 'vue'; import Vuex from 'vuex';   Vue.use(Vuex); const state={   number:1 }  export default new Vuex.Store({   state, })

　　　　然后我们在main.js中引用store.js，并将实例化对象的时候加入store对象

　　　　main.js　　

import Vue from 'vue' import App from './App' import router from './router'//引用store.jsimport store from './vuex/store'  Vue.config.productionTip = false/* eslint-disable no-new */new Vue({   el: '#app',   router, //实例化的时候加入store对象  store,   components: { App },   template: '<App/>' })

　　然后修改一下我们的App.vue文件

　　App.vue

<template>  <div id="app">    <img src="./assets/logo.png">//视图层加数据方便观察    <p>{{this.$store.state.number}}</p>  </div></template><script> export default {   name: 'App' } </script><style> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

通过上述代码我们可以看到，我们在App.vue中加入了一个p标签，vuex规定：如果我们需要读取vuex中的数据，也就是state的数据源仓库，我们必须通过this.$store.state.变量名访问