200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Vue前端项目-Vuex实战使用

Vue前端项目-Vuex实战使用

时间:2019-08-07 06:04:07

相关推荐

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 脚手架创建项目参考自:

/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方式获取数据

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。