Vue前端项目-Vuex实战使用

目录

1、创建 vue-cli 脚手架项目

2、安装 vuex

3.将 store 实例注册到 Vue对象

4. store 实例对象

 5、将 store 分割成模块化（Module）

6、项目中的模块化

7. 模块化文件

8. action 中的第一个参数

9. 如何调用 action 中的方法

10. 项目中是如何 调用 action 中的方法

11. Getter 获取 store 中存放的数据

 12 项目中getters 使用

 13. mapGetters 辅助函数 获取数据

14. store.getters方式获取数据

本章教程会结合 Vue 前端项目 以及 Vuex官网的知识点来介绍，Vuex在实战项目中到底如何使用？

1、创建 vue-cli 脚手架项目

因为本章教程只是介绍 Vuex 相关的知识点，所以 vue-cli 脚手架创建项目参考自：

https://blog.csdn.net/u010559460/article/details/104709597

2、安装 vuex

安装过程略，安装结果如图：

3.将 store 实例注册到 Vue对象

把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件

4. store 实例对象

步骤3 将到需要一个 store 实例对象注册到 Vue的属性。

本步骤将定义一个 全局的 store。

创建 src / store / index.js文件，内容如图：

 5、将 store 分割成模块化（Module）

下图来自官网的模块化介绍：

6、项目中的模块化

在src / store / index.js文件中

拿 user 模块 举例，创建 src / store / modules / user.js 文件

7. 模块化文件

拿 user 模块 举例，创建 src / store / modules / user.js 文件

我们在 state 中定义 需要存放在 store 中的数据

在 mutations 中修改 store 中的数据，但需要注意 mutations 中定义的方法是同步的

 在   actions 中定义异步方法，通常我们会调用这个异步方法获取数据后 再调用 mutations 中的方法将数据存储到 store 中

8. action 中的第一个参数

9. 如何调用 action 中的方法

10. 项目中是如何 调用 action 中的方法

11. Getter 获取 store 中存放的数据

官网例子:

 12 项目中getters 使用

 13. mapGetters 辅助函数 获取数据

14. store.getters方式获取数据