目录
2.在src目录下创建store文件夹，文件夹内创建index.js
5.开始写变更数据的方法与逻辑，因为现在只需要点击加一，没有异步操作，使用直接用mutations即可，尚不需要actions的参与
8.接下来做一步点击加或减按钮后等待三秒执行，因为这是一个异步操作，所以就需要用到actions
11.接下来把vuex中的学生数据，展示到count组件中，
13.在组件中调用就需要用$store.state.xxx.count
：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之前对比：
观看阅读更加直观 。
5892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
