目录

1.安装vuex npm i vuex

2.在src目录下创建store文件夹，文件夹内创建index.js

 文件结构如下：

 3.在main.js中导入使用

 4，首先做一个计数器，创建一个Count组件

 记得组件需要注册，在根组件中注册与使用

 5.开始写变更数据的方法与逻辑，因为现在只需要点击加一，没有异步操作，使用直接用mutations即可，尚不需要actions的参与

 6.减法功能和上面加法的一致

7.页面效果如下： 

 8.接下来做一步点击加或减按钮后等待三秒执行，因为这是一个异步操作，所以就需要用到actions

9.页面效果如下： 

10.vuex组件传参， 前面说到，vuex是为了让组件间传递数据更加方便，接下来就再创建两个组件，并在vuex中添加数据，为了凸显在组件间中传递数据的便利，所以把count组件和teacher组件形成兄弟关系（也就是同层级关系），把teacher组件和student组件形成父子关系（也就是嵌套关系）

 11.接下来把vuex中的学生数据，展示到count组件中，

 把count数据展示到teacher中

 非常简单，现用现取，页面效果如下

 12.模块化，现在已经有三个组件了，都用到了vuex，这时vuex会显得臃肿，行数很多，不容易查看维护，这时候就用到了moudle配置项，我们把用到vuex的组件再在store文件夹中新建一个与之对应的js文件，并在index.js文件中导入使用

 13.在组件中调用就需要用$store.state.xxx.count

 14.前面已经介绍了state，mutations，actions，moudles配置项，还有一个getter，在这里说下，它能简化数据调用层级，在teacher.js中，teacher数据的层级很深，需要一直用.来调用，现在我们来改造下

 在组件中调用

 和没用getters之前对比：

15.现在整体案例已经完成，不知道大家现在是否对vuex有了更加直观的感受，操作vuex还有更加简便的方法，mapState,mapGetters,mapMutations和mapActions四个高阶方法，大家闲余时间可以去搜索使用一下，做一下练习锻炼，在这里我就不再赘述了，以上操作完全够用，高阶方法就留给大家自己摸索了，欢迎评论指正，谢谢观看

：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

光看介绍只会越看越蒙，只需要记得为什么要是用vuex，因为我们需要组件间传递数据，考虑到项目中会有很多组件需要使用其他组件的数据，只用props，自定义事件，provide和inject依赖注入，全局事件总线，消息订阅预发布等方式会显得很繁琐，传来传去一会把自己传蒙了，不知道谁接收谁传了，所以这时候使用vuex会更明智一点，接下来写个案例可能会让你更进一步的认知vuex

因为官网介绍说将在2023年底停止对vue2的更新和维护，所以这里以vue3为例：需使用4.0版本的vuex。

注意：使用vue脚手架选择手动配置的化，可在cmd窗口自己选择并自动安装创建文件夹，选择默认配置的话是没有vue-router和vuex的，需要自己安装指定版本，此案例是选择的默认项目，所以需要安装vuex

1.安装vuex npm i vuex

2.在src目录下创建store文件夹，文件夹内创建index.js

 文件结构如下：

 3.在main.js中导入使用

 4，首先做一个计数器，创建一个Count组件

 记得组件需要注册，在根组件中注册与使用

 5.开始写变更数据的方法与逻辑，因为现在只需要点击加一，没有异步操作，使用直接用mutations即可，尚不需要actions的参与

 6.减法功能和上面加法的一致

7.页面效果如下： 

 8.接下来做一步点击加或减按钮后等待三秒执行，因为这是一个异步操作，所以就需要用到actions

9.页面效果如下： 

10.vuex组件传参， 前面说到，vuex是为了让组件间传递数据更加方便，接下来就再创建两个组件，并在vuex中添加数据，为了凸显在组件间中传递数据的便利，所以把count组件和teacher组件形成兄弟关系（也就是同层级关系），把teacher组件和student组件形成父子关系（也就是嵌套关系）

 效果图如下

 11.接下来把vuex中的学生数据，展示到count组件中，

 把count数据展示到teacher中

 非常简单，现用现取，页面效果如下

 12.模块化，现在已经有三个组件了，都用到了vuex，这时vuex会显得臃肿，行数很多，不容易查看维护，这时候就用到了moudle配置项，我们把用到vuex的组件再在store文件夹中新建一个与之对应的js文件，并在index.js文件中导入使用

 13.在组件中调用就需要用$store.state.xxx.count

 14.前面已经介绍了state，mutations，actions，moudles配置项，还有一个getter，在这里说下，它能简化数据调用层级，在teacher.js中，teacher数据的层级很深，需要一直用.来调用，现在我们来改造下

 在组件中调用

 和没用getters之前对比：

观看阅读更加直观 。

15.现在整体案例已经完成，不知道大家现在是否对vuex有了更加直观的感受，操作vuex还有更加简便的方法，mapState,mapGetters,mapMutations和mapActions四个高阶方法，大家闲余时间可以去搜索使用一下，做一下练习锻炼，在这里我就不再赘述了，以上操作完全够用，高阶方法就留给大家自己摸索了，欢迎评论指正，谢谢观看