router中获取vuex_一个简单实例了解vuex如何使用

作者：我心依然_Song
链接：https://www.imooc.com/article/302891

什么是vuex，vuex怎么使用，什么场景下适合使用vuex， vuex 文档中都有介绍。看完文档之后，都知道vuex的核心有State、Getter、Mutation、Action、Module，也都知道分别都是干嘛的。

但是实际到项目中可能就会出现不知道怎么动手实际操作了。下面就通过一个简单实例来说下vuex具体如何使用。

分步操作，从安装到实例操作。

安装vuex

安装vuex有3种方式。其中两种是在通过 vue create project-name创建项目时选择安装，如图所示：

第一种会把vue-router、vuex、babel、eslint一起安装。

第二种手动选择安装，根据需要选择性安装，如图所示：

第三种就是在创建项目时选择default，只会安装babel、eslint。创建好项目之后，进入到项目，然后安装vuex。

分步准备阶段

按步骤，一步步来

项目目录:

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。

而实际项目也会分多个模块，比如：用户、订单等。此实例中只创建了一个用户模块。

模块文件

在src目录下创建一个store目录，进入到store目录，然后在创建一个modules目录，最后user模块文件user.js

总的来说：

①state中定义好要用的属性值；

②mutation中定义好操作这些属性的函数(同步函数)；

③action中定义可以提交mutation的函数，可以是异步函数；

getters.js

在store目录下创建index文件

如果modules有多个模块，那么可以在getters文件中统一的提供供组件中获取不同模块中的属性值。如代码所示：

index.js

在store目录下创建index文件

导入之前在modules定义的文件和getters文件。导入modules有2种方式：

①按照注释的方式导入；

②按照代码中现在方式引入使用

最后在main.js中导入store

慕课网大前端训练营 火爆开班！

24周系统化课程

110+必备知识点，15种效率工具

1套业务系统，实现多端应用场景

直击面试难点、痛点、盲点，详解求职技巧

名额有限，赶快扫码报名吧！ ↓↓↓

添加彤彤小姐姐微信 限时领取 200元 优惠码， 2280即可入手 仅有 3个 名额，不要错过呦～