在之前的学习中，都是通过父子组件进行传参的，当多个组件依赖于同一状态时，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。此时我们就需要用到vuex了。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，解决了组件之间同一状态的共享问题，下面通个简单的实例开演示具体使用操作。
创建项目
和之前一样，使用脚手架快速搭建项目，在存放项目的位置打开命令行，
创建项目：vue init webpack-simple vue-vuex
下载依赖：npm install
运行项目：npm run dev
项目新建成功，进行下一步
完成项目结构
本次我们要实现的功能是在一个组件中更改某个数据后，在其他组件中该数据能随之动态变化，所以我们需要先完成基本项目结构。
既然是不同组件的跳转，首先必须要安装路由：只需要在项目的根目录执行命令：npm install vue-router --save即可。
其次，新建组件和路由了，都是以前的知识，这里就不再重复了，具体的可以下载文末的源码查看。
引入vuex
通常情况下，在大项目中，需要进行状态管理的数据会很多，所以更好的办法是新建一个文件专门用来存放这些需要管理的数据：
1，在项目根目录执行vuex安装命令：npm install vuex --save
2，在src目录下新建一个vuex的文件夹，在vuex文件夹里面新建一个store.js文件
3，在刚才创建的store.js文件中引入vue 引入vuex 并且use vuex
使用vuex
在使用vuex的时候，就需要用到vuex的官方网站https://vuex.vuejs.org/zh/上面提到的一些vuex的核心概念，首先是vuex，被称为单一状态数，主要是用来存储数据的；其次是mutations，用于存放改变state里面的数据的方法。具体如下所示：
1，在state中定义数据
2，在mutations里面定义方法
3，实例化 Vuex.store并进行暴露。
组件中使用vuex
首先不考虑组件中通信，单独在某个组件中使用vuex，例如在Home.vue这个组件中展示并更改数据。
1，需要引入store：import store from '../vuex/store.js';
2，注册store
3，展示数据：{{this.$store.state.count}}
4，改变，在上面定义的改变方法是实现数据自增的效果，所以这里的改变数据只是通过点击事件来触发 mutations 改变 state里面的数据，需要注意的是，在官网上面提到在触发方法的时候需要传递一个参数，方便方法中使用，这里直接是自增，不要参数，就要传递一个空置过去，不能直接省略，否则会报错。
实现了单组件的使用后，再来看一看不同组件间的数据共享。
在上面的基础上，打开News.vue，操作步骤和上面是一样，直接使用的时候，只需要前三步就可以了，需要改变的时候，就需要通过一些方法来触发 mutations 。
首先在首页中改变计数为5.
然后打开新闻页面，会发现计数也是5.
继续在新闻页中增加计数为10。
再回到首页。
代码下载：点这里
模块化
现在，我们是将变量的定义和数据操作全部都放在了一个文件里面了，老生常谈的是，当项目变大，需要存储的数据变多时，会不方便管理和维护，所以，需要模块化处理数据。
目前，vuex文件夹下面的store.js里面的内容如下：
现在在此基础上进行改造。
1，首先，在vuex文件夹下面新建index.js和mutations.js两个文件
2，然后，将之前store.js里面的内容进行分割：index.js作为入口文件，把我们需要的文件 都引入里面 ，注入并导出；store.js用来初始化和存储数据，mutations.js用来操作数据。
3，接下来，修改使用方式，在上面的例子中，我们是在需要使用的地方进行引入，每次需要操作三次。
现在，只需要在main.js中一次性引入 在需要使用的地方直接使用就可以了。
数据持久化
vuex的作用是多组件共享数据和状态，在上面我们已经看到了它的一部分作用。现在存在的问题是，刷新之后，数据就会被清空。在上面的例子中，当我们不停的点击，把数据加的足够大的时候，刷新浏览器，我们会发现，数据回到了默认的初始值。这个影响不是很大，如果我们使用这种方式记录用户的登录状态，刷新浏览器之后，登录状态丢失，用户体验就非常不好了，因此，需要将vuex和本地进行存储，为了便于演示，再添加一个数据，形成对比（添加和使用同第一个数据一样）。
然后将存储薪水的数据在本地进行存储，主要是在随数据进行操作的时候，及时更新本地存储。
然后取数据的时候，从本地取。
现在来进行测试：
首先是操作两个数据：
然后刷新浏览器：
这样数据就不会因为刷新浏览器而丢失了。
代码下载：点这里