在国外做电商网站,网站首页的浮窗怎么做,做物业管理的企业网站,wordpress 支持 插件下载一、vuex概述
1、目标#xff1a;明确vuex是什么#xff0c;应用场景#xff0c;优势
2、是什么#xff1a;vuex是一个vue的状态管理工具#xff0c;状态就是数据
(简述#xff1a;vuex是一个插件#xff0c;可以帮我们管理vue通用的数据)
3、场景#xff1a;
(1)…一、vuex概述
1、目标明确vuex是什么应用场景优势
2、是什么vuex是一个vue的状态管理工具状态就是数据
(简述vuex是一个插件可以帮我们管理vue通用的数据)
3、场景
(1)某个状态在很多组件来使用
(2)多个组件共同维护一份数据
4、优势
(1)共同维护一份数据数据集中化管理
(2)响应式变化
(3)操作简洁(vuex提供了一些辅助函数)
5、构建vuex环境
1、安装vuexyarn add vuex3 (233,344)2、新建vuex模块文件新建 store/index.js专门存放vuex3、创建仓库Vue.use(Vuex)new Vuex.Store()4、main.js导入挂载import store from /store/indexstore
6、核心概念 - state状态mapState
1、提供数据State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。语法const store new Vuex.Store({state: {//数据count:100,title:大标题}}) 2、获取数据2.1、通过store直接访问模板中{{ $store.state.xxx }}组件逻辑中this.$store.state.xxxJS模块中 store.state.xxx2.2、通过辅助函数mapState是辅助函数可以帮助我们吧store中的数据自动映射到组件的计算属性中使用步骤2.2.1、导入mapStateimport { mapState } from vuex2.2.2、数组方式引入statemapState([所需要的属性])2.2.3、展开运算符映射...mapState([所需要的属性])映射后便能直接用计算属性的方式读取
7、核心概念 - mutations
1、基础语法
1、概念Vuex同样遵循单向数据流组件不能直接修改仓库的数据2、报错默认不会报错甚至能够自由的修改可这是一种违背单向数据流原理的做法若要使其报错可以添加strict: true,有利于初学者检测不规范的代码上线时需要关闭3、目标使用mutaions修改state的数据(1)定义mutaions对象对象中存放修改state的方法mutations:{//第一个参数是当前store的state属性addCount(state){state.count 1 } (2)组件中提交调用mutationsthis.$store.commit(方法名)
2、传参语法
1、传参语法this.$store.commit(方法名,参数)2、定义语法addCount (state, n) {state.count n}3、注Vuex不能传递多个参数可以使用对象数组等复杂形式
8、辅助函数 - mapMutations
1、作用将mutation中的方法提取出来映射到组件methods中2、使用import { mapMutations } from vuexmethods:{...mapMutations([函数名]) }
9、核心概念 - actions
(1)目标明确actions的基本语法处理异步操作
(2)说明mutations必须是同步的(便于监测数据变化记录调试)
1、定义语法actions:{//context上下文方法名(context,num){//行为 }}2、调用语法this.$store.dispatch(方法,参数)
10、辅助函数 - mapActions
1、同样是映射到组件methods中2、用法import { mapActions } from vuexmethods:{...mapActions([方法名]) }
11、核心概念 - getters
1、说明类似于计算属性是从state中派生出的状态
1、定义语法getters:{//(1)getters函数的第一个参数是state//(2)getters函数必须要有返回值方法 }2、访问语法$store.getters.方法名
12、辅助函数 - mapGetters
1、放在computed中computed:{...mapGetters([方法名]) }
13、核心概念 - 模块module(进阶语法)
(1)概念由于vuex使用单一状态树应用的所有状态会集中到一个比较大的对象当应用变得非常复杂时store对象就有可能变得相当臃肿。
1、使用步骤(1)创建store/modules/目录//这个目录下的每个js文件都是一个模块都有着自己所对应的概念(2)编写js文件const state {}const mutations {}...//创建数据和方法export default {//导出state,mutations,...}(3)使用import user from ./model/user//在index.js中导入文件modules: {//在modules下挂载user,}
(2)目标掌握模块中state的访问语法
1、使用模块中的数据(1)直接通过模块名访问$store.state.模块名.xxx(2)通过mapState映射默认根级别的映射 mapState([xxx])子模块的映射 mapState(模块名,[xxx])注若想通过模块名访问需要在js中添加namespaced:true
(3)目标掌握模块中mutation的访问语法
1、直接调用$store.commit(模块名/方法名,参数)2、通过mapMutations映射默认映射mapMutations([xxx])子模块映射mapMutations(模块名,[xxx])注若想通过模块名访问需要在js中添加namespaced:true
(4)目标掌握模块中action的访问语法
1、直接调用$store.dispatch(模块名/xxx,额外参数)2、同mapActions映射默认映射mapActions([xxx])子模块映射mapActions(模块名,[xxx])注若想通过模块名访问需要在js中添加namespaced:true
(5)目标掌握模块中getters的访问语法
1、直接通过模块名访问$store.getters(模块名/方法名)2、通过mapGetters映射默认根级别的映射mapGetters([xxx])子模块的映射 mapGetters(模块名,[xxx])注若想通过模块名访问需要在js中添加namespaced:true
