目录
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 中存放的数据
官网例子: