什么网站可以做音乐伴奏,pc网站开发工具,app网站建设介绍,苏州园区网站开发Vue工程化开发
一、工程化开发和脚手架
1.开发Vue的两种方式
核心包传统开发模式#xff1a;基于html / css / js 文件#xff0c;直接引入核心包#xff0c;开发 Vue。工程化开发模式#xff1a;基于构建工具#xff08;例如#xff1a;webpack#xff09;的环境中开…Vue工程化开发
一、工程化开发和脚手架
1.开发Vue的两种方式
核心包传统开发模式基于html / css / js 文件直接引入核心包开发 Vue。工程化开发模式基于构建工具例如webpack的环境中开发Vue。
工程化开发模式优点
提高编码效率比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题
webpack配置不简单雷同的基础配置缺乏统一的标准
为了解决以上问题所以我们需要一个工具生成标准化的配置
2.脚手架Vue CLI
Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
使用步骤
全局安装只需安装一次即可 yarn global add vue/cli 或者 npm i vue/cli -g查看vue/cli版本 vue --version创建项目架子vue create project-name(项目名不能使用中文)启动项目yarn serve 或者 npm run serve(命令不固定找package.json)
3.项目目录介绍和运行流程 二、组件化开发
组件化一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为。
好处便于维护利于复用 → 提升开发效率。
组件分类普通组件、根组件。
1.根组件 App.vue
整个应用最上层的组件包裹所有普通小组件 2.组件是由三部分构成
语法高亮插件 三部分构成 template结构 有且只能一个根元素script: js逻辑style 样式 (可支持less需要装包) 让组件支持less 1 style标签lang“less” 开启less功能 2 装包: yarn add less less-loader -D 或者npm i less less-loader -D
3.局部注册
局部注册只能在注册的组件内使用放在components包下以大驼峰命名法 如 HmHeader
// 导入需要注册的组件
import 组件对象 from .vue文件路径
import HmHeader from ./componets/HmHeaderexport default { // 局部注册components: {组件名: 组件对象,HmHeader:HmHeaer,HmHeader}
}3.全局注册
全局注册的组件在项目的任何组件中都能使用,在mian.js中进行注册
Vue.component(‘组件名’, 组件对象)
例
// 导入需要全局注册的组件
import HmButton from ./components/HmButton
Vue.component(HmButton, HmButton)scoped样式冲突
默认情况下写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。 全局样式: 默认组件中的样式会作用到全局任何一个组件中都会受到此样式的影响 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
style scoped
/style组件data函数写法
一个组件的 data 选项必须是一个函数(以前是对象)。保证每个组件维护一份数据函数执行一次得到一个新函数保证每个组件实例维护独立的一份数据对象。
代码演示
templatediv classbase-countbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div
/templatescript
export default {data: function () {return {count: 100,}},
}
/script三、父子组件通信
组件通信就是指组件与组件之间的数据传递组件的数据是独立的无法直接访问其他组件的数据。想使用其他组件的数据就需要组件通信
父子通信流程
父组件通过 props 将数据传递给子组件子组件利用 $emit 通知父组件修改更新
1.定义父子组件
父组件App.vue
templatediv classapp styleborder: 3px solid #000; margin: 10px我是APP组件 Son/Son/div
/templatescript
import Son from ./components/Son.vue
export default {name: App,data() {return {myTitle: Vue,}},components: {Son,},
}
/script子组件Son.vue
templatediv classson styleborder:3px solid #000;margin:10px我是Son组件/div
/templatescript
export default {name: Son-Child,
}
/scriptstyle/style2.父向子传递数据
子组件利用 props 向子组件传递数据可以传递 任意数量 任意类型 的prop 父向子传值步骤
给子组件以添加属性的方式传值子组件内部通过props接收模板中直接使用 props接收的值
3.子向父通信
子组件利用 $emit 通知父组件进行修改更新 子向父传值步骤
$emit触发事件给父组件发送消息通知父组件监听$emit触发的事件提供处理函数在函数的性参中获取传过来的参数
4.props校验
为组件的 prop 指定验证要求不符合要求控制台就会有错误提示 → 帮助开发者快速发现错误可以进行类型校验、非空校验、默认值、自定义校验
props{校验的属性名类型Number String Boolean ...//传递值必须为对应类型
}props校验完整写法
语法
props: {校验的属性名: {type: 类型, // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},注意 default和required一般不同时写因为当时必填项时肯定是有值的 default后面如果是简单类型的值可以直接写默认。如果是复杂类型的值则需要以函数的形式return一个默认值 四、-event bus事件总线
-event bus事件总线可在非父子组件之间进行简易消息传递。(复杂场景→ Vuex)
步骤 创建一个都能访问的事件总线 空Vue实例 import Vue from vue
const Bus new Vue()
export default BusA组件接受方监听Bus的 $on事件 created () {Bus.$on(sendMsg, (msg) {this.msg msg})
}B组件发送方触发Bus的$emit事件 Bus.$emit(sendMsg, 这是一个消息)代码示例 五、provideinject
provideinject可用于跨层级共享数据顶层组件提供数据子孙后代获取数据
语法
父组件 provide提供数据
export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}2.子/孙组件 inject获取数据
export default {inject: [color,userInfo],created () {console.log(this.color, this.userInfo)}
}注意 provide提供的简单类型的数据不是响应式的上层修改子孙后代的值不会实时修改复杂类型数据是响应式。推荐提供复杂类型数据子/孙组件通过inject获取的数据不能在自身组件内修改 六、.sync修饰符
作用实现 子组件 与 父组件数据 的 双向绑定简化代码
简单理解子组件可以修改父组件传过来的props值
语法
父组件在原本父传子的基础上加上 .sync和update:属性名的简写
//.sync写法,本质是 :属性名和
BaseDialog :visible.syncisShow /
--------------------------------------
//完整写法
BaseDialog :visibleisShow update:visibleisShow $event
/子组件事件类型固定位update:属性名
props: {visible: Boolean
},
//update对应上面的update
this.$emit(update:visible, false)代码示例 七、ref和$refs
ref 和 $refs 可以用于在 **当前组件内 **(更精确稳定)获取 dom 元素 或 组件实例
语法
1.给要获取的盒子添加ref自定义属性名
div refchartRef我是渲染图表的容器/div2.获取时通过 $refs获取 this.$refs.chartRef 获取当前实例须渲染完成
mounted () {console.log(this.$refs.chartRef)
}之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子 代码示例 八、异步更新 $nextTick
$refs获取dom时可能dom未更新导致获取失败,$nextTick等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() {this.$refs.inp.focus()
})注意$nextTick 内的函数体 一定是箭头函数这样才能让函数内部的this指向Vue实例 九、插槽
1.默认插槽
如果组件结构相同但现实内容不同例如提示框。就可以使用插槽自定义组件显示内容
插槽的基本语法
组件内需要定制的结构部分改用****占位使用组件时, ****标签内部, 传入结构替换slot给插槽传入内容时可以传入纯文本、html标签、组件
实例 插槽默认值
通过插槽完成了内容的定制传什么显示什么, 但是如果不传则是空白
封装组件时可以为预留的 slot 插槽提供后备内容默认内容。
在 标签内放置内容, 作为默认显示内容 !-- 往slot标签内部编写内容可以作为后备内容(默认值) --slot我是默认的文本内容/slot2.插槽-具名插槽
默认插槽只能定制一个内容如果需要为多个地方定制内容需要使用具名插槽给插槽起名字
语法 v-slot写起来太长vue给我们提供一个简单写法 v-slot — # 3.作用域插槽
作用域插槽值定义slot 插槽的同时, 。给 插槽 上可以 绑定数据来 给使用组件时可以用它是插槽的传参语法并不是插槽的类别
使用步骤 给 slot 标签, 以 添加属性的方式传值 slot :iditem.id msg测试文本/slot所有添加的属性, 都会被收集到一个对象中 { id: 3, msg: 测试文本 }在template中, 通过 #插槽名 obj 接收默认插槽名为 default MyTable :listlisttemplate #defaultobjbutton clickdel(obj.id)删除/button/template
/MyTable插槽只有两种默认插槽和具名插槽作用域插槽不属于插槽的一种分类 十、路由
1.路由基本使用
Vue工程一般都为单页面程序单页应用程序SPA【Single Page Application】是指所有的功能都在一个html页面上实现如网易云官网。单页面应用程序页面是按需更新所以开发效率高性能好用户体验也更好。要按需更新就需要明确访问路径和 组件的对应关系而路由就是设置组件和访问路径的
VueRouter安装配置步骤
//1.下载 VueRouter 模块到当前工程版本3.6.5
yarn add vue-router3.6.5
//2.main.js中引入VueRouter
import VueRouter from vue-router
//3.安装注册
Vue.use(VueRouter)
//4.创建路由对象
const router new VueRouter()
//5.注入将路由对象注入到new Vue实例中建立关联
new Vue({render: h h(App),router:router
}).$mount(#app)注当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了 VueRouter路径设置 在main.js创建需要的组件 (views目录)配置路由规则 import Find from ./views/Find
import My from ./views/My
import Friend from ./views/Friend
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化const router new VueRouter({// routes 路由规则们// route 一条路由规则 { path: 路径, component: 组件 }routes: [{ path: /find, component: Find },{ path: /my, component: My },{ path: /friend, component: Friend },]
})配置导航配置路由出口(路径匹配的组件显示的位置) App.vue div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtoprouter-view/router-view
/div路由的封装抽离
可以将路由模块单独抽离出来。 好处拆分模块利于维护 路径简写 脚手架环境下 指代src目录可以用于快速引入组件 2.声明式导航-导航链接
vue-router 提供了一个全局组件 router-link (取代 a 标签)
能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式
语法 发现音乐 divdiv classfooter_wraprouter-link to/find发现音乐/router-linkrouter-link to/my我的音乐/router-linkrouter-link to/friend朋友/router-link/divdiv classtop!-- 路由出口 → 匹配的组件所展示的位置 --router-view/router-view/div/div声明式导航-两个类名
使用router-link跳转后我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active我们可以给任意一个class属性添加高亮样式即可实现功能 router-link-active模糊匹配用的多to“/my” 可以匹配 /my /my/a /my/b … router-link-exact-active精确匹配to“/my” 仅可以匹配 /my
-在跳转路由时进行传参。可以通过查询参数传参和动态路由传参两种方式在跳转的时候把所需要的参数传到其他页面中
01-查询参数传参 传参 接受参数 固定用法$router.query.参数名
示例 02-动态路由传参 配置动态路由 动态路由后面的参数可以随便起名但要有语义 const router new VueRouter({routes: [...,{ path: /search/:words, component: Search }]
})配置导航链接 to“/path/参数值” 对应页面组件接受参数 $route.params.参数名
示例 注 查询参数传参 (比较适合传多个参数)动态路由传参 (优雅简洁传单个参数比较方便)动态路由也可以传多个参数但一般只传一个 动态路由参数的可选符(了解)
配了路由 path:“/search/:words” 如果没有传入参数会未匹配到组件显示空白。如果不传参数也希望匹配可以在words后面加一个
3.编程式导航
编程式导航是用JS代码来实现点击按钮时跳转路由主要有两种方式path 路径跳转 简易方便和name 命名路由跳转 (适合 path 路径长的场景)
01-path路径跳转语法
特点简易方便
query查询参数跳转
//简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})接受参数的方式依然是$route.query.参数名
动态路由传参
//简单写法
this.$router.push(/路径/参数值)
//完整写法
this.$router.push({path: /路径/参数值
})示例 **注意**path不能配合params使用 02-name命名路由跳转
特点适合 path 路径长的场景
query查询参数跳转
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})接受参数的方式依然是$route.query.参数名
动态路由传参
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})示例 4.路由重定向
网页打开时 url 默认是 / 路径未匹配到组件时会出现空白可以加上redirect配置重定向路径
示例
const router new VueRouter({routes: [{ path: /, redirect: /home},...]
})5.404页面路由
当路径找不到匹配时给个404提示页面
配置方式
path: “*” (任意路径) – 前面不匹配就命中最后这个
import NotFind from /views/NotFindconst router new VueRouter({routes: [...{ path: *, component: NotFind } //最后一个]
})6.Vue路由-模式设置
路由的路径看起来不自然, 有#能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
设置方式
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
})7. 二级路由配置
当在页面中点击链接跳转只是部分内容切换时我们可以使用嵌套路由,二级路由也叫嵌套路由当然也可以嵌套三级、四级…
配置方式
在一级路由下配置children属性即可配置二级路由的出口
1.在一级路由下配置children属性
注意:一级的路由path 需要加 / 二级路由的path不需要加 /
const router new VueRouter({routes: [{path: /,component: Layout,children:[//children中的配置项 跟一级路由中的配置项一模一样 {path:xxxx,component:xxxx.vue},{path:xxxx,component:xxxx.vue},]}]
})2.配置二级路由的出口
这些二级路由对应的组件渲染到哪个一级路由下children就配置到哪个路由下边
注意 配置了嵌套路由一定配置对应的路由出口否则不会渲染出对应的组件
Layout.vue
templatediv classh5-wrapperdiv classcontentrouter-view/router-view/div..../div
/template二级导航高亮
将a标签替换成 组件配置to属性不用加 #结合高亮类名实现高亮效果 (推荐模糊匹配router-link-active)
代码实现
Layout.vue
....nav classtabbarrouter-link to/article面经/router-linkrouter-link to/collect收藏/router-linkrouter-link to/like喜欢/router-linkrouter-link to/user我的/router-link/navstylea.router-link-active {color: orange;}
/style十一、缓存组件
当路由被跳转后原来所看到的组件就被销毁了会执行组件内的beforeDestroy和destroyed生命周期钩子重新返回后组件又被重新创建了会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子所以数据被加载了。这样就会导致详情页返回列表页页面重新加载回到列表顶部。
keep-alive
keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM可以减少加载时间及性能消耗提高用户体验性。
keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。
App.vue
templatediv classh5-wrapperkeep-aliverouter-view/router-view/keep-alive/div
/template这样会缓存了所有被切换的组件 keep-alive的三个属性 include 组件名数组只有匹配的组件会被缓存 exclude 组件名数组任何匹配的组件都不会被缓存 max 最多可以缓存多少组件实例
示例
templatediv classh5-wrapperkeep-alive :include[LayoutPage]router-view/router-view/keep-alive/div
/templatekeep-alive的使用会触发两个生命周期函数
activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子帮我们实现业务需求。
十二、Vuex
Vuex 是一个 Vue 的 状态管理工具状态就是数据。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。
优势
共同维护一份数据数据集中化管理响应式变化操作简洁 (vuex提供了一些辅助函数)
但不是所有的场景都适用于vuex只有在必要的时候才使用vuex使用了vuex之后会附加更多的框架中的概念进来增加了项目的复杂度 数据的操作更便捷数据的流动更清晰
vuex安装使用
1. 安装 vuex
//安装vuex与vue-router类似vuex是一个独立存在的插件如果脚手架初始化没有选 vuex就需要额外安装。
yarn add vuex3 或者 npm i vuex32.新建 store/index.js 专门存放 vuex
为了维护项目目录的整洁在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)
3.创建仓库 store/index.js
// 导入 vue
import Vue from vue
// 导入 vuex
import Vuex from vuex
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库 store
const store new Vuex.Store()// 导出仓库
export default store4 在 main.js 中导入挂载到 Vue 实例上
import Vue from vue
import App from ./App.vue
import store from ./storeVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)此刻起, 就成功创建了一个 空仓库!!
5.测试打印Vuex
App.vue
created(){console.log(this.$store)
}1.state 状态
State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件在state对象中可以添加我们要共享的数据。
// 创建仓库 store
const store new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})访问Vuex中的数据的方式
通过$store直接访问 — {{ $store.state.count }}通过辅助函数mapState 映射计算属性 — {{ count }}
通过$store访问的语法
获取 store1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store模板中 {{ $store.state.xxx }}
组件逻辑中 this.$store.state.xxx
JS模块中 store.state.xxx组件逻辑中使用
将state属性定义在计算属性中可以直接使用变量名访问
h1state的数据 - {{ count }}/h1// 把state中数据定义在组件内的计算属性中computed: {count () {return this.$store.state.count}}每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢
2.mapState
访问state内属性每次都需要一个个的提供计算属性, 太麻烦了。Vue为我们提供了mapState辅助函数帮助我们把store中的数据映射到 组件的计算属性中
使用步骤
//1.引入 mapState函数import { mapState } from vuex
//2.采用数组形式引入state属性mapState([count])
//3.利用展开运算符将导出的状态映射给计算属性computed: {...mapState([count])}3.mutations
明确 vuex 同样遵循单向数据流组件中不能直接修改仓库的数据。如果需要修改需要提交mutations方式提交给仓库让仓库进行修改
mutations是一个对象对象中存放修改state的方法
const store new Vuex.Store({state: {count: 0},mutations: {// 方法里参数 第一个参数是当前store的state属性// payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷addCount (state) {state.count 1}}
})组件中提交 mutations
this.$store.commit(addCount)带参数的 mutations
1.提供mutation函数带参数
mutations: {...addCount (state, count) {state.count count}
},2.提交mutation
handle ( ) {this.$store.commit(addCount, 10)
}小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象 4.mapMutations
mapMutations和mapState很像它把位于mutations中的方法提取了出来我们可以将它导入
import { mapMutations } from vuex
methods: {...mapMutations([addCount])
}
//上面代码的含义是将mutations的方法导入了methods中等价于
//methods: {
// addCount () {
// this.$store.commit(addCount)
// }
// }methods: {// commit(方法名, 载荷参数)addCount () {this.$store.commit(addCount)}}此时就可以直接通过this.addCount调用了
button clickaddCount值1/button注意 Vuex中mutations须是同步的,不能写异步代码如果有异步的ajax请求应该放置在actions中
5.actions
state是存放数据的mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)
actions则负责进行异步操作
1.定义actions
mutations: {changeCount (state, newCount) {state.count newCount}
}actions: {setAsyncCount (context, num) {// 一秒后, 给一个数, 去修改 numsetTimeout(() {context.commit(changeCount, num)}, 1000)}
},2.组件中通过dispatch调用
setAsyncCount () {this.$store.dispatch(setAsyncCount, 666)
}6.mapActions
mapActions 是把位于 actions中的方法提取了出来映射到组件methods中
import { mapActions } from vuex
methods: {...mapActions([changeCountAction])
}//mapActions映射的代码 本质上是以下代码的写法
//methods: {
// changeCountAction (n) {
// this.$store.dispatch(changeCountAction, n)
// },
//}直接通过 this.方法 就可以调用
button clickchangeCountAction(200)异步/button7.getters/mapGetters
除了state之外有时我们还需要从state中筛选出符合条件的一些数据这些数据是依赖state的此时会用到getters。getters的数据依赖state
1.定义getters getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList: state state.list.filter(item item 5)}2.使用getters
2.1原始方式-$store
div{{ $store.getters.filterList }}/div2.2辅助函数 - mapGetters
computed: {...mapGetters([filterList])
}div{{ filterList }}/div十三、Vuex分模块module
由于使用单一状态树应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。这句话的意思是如果把所有的状态都放在state中当项目变得越来越大的时候Vuex会变得越来越难以维护。由此又有了Vuex的模块化
分模块步骤
01.模块定义 - 准备 state
定义两个模块 user 和 setting放在 store/modules/user.js并导出
const state {userInfo: {name: zs,age: 18}
}const mutations {}
const actions {}
const getters {}
export default {namespacetrue //开启命名空间state,mutations,actions,getters
}
02.模块注册
在store/index.js文件中的modules配置项中注册这两个模块
import user from ./modules/user
import setting from ./modules/settingconst store new Vuex.Store({modules:{user,setting}
})使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx $store.state.setting.desc
也可以通过 mapState 映射 尽管已经分模块了但其实子模块的状态还是会挂到根级别的 state 中属性名就是模块名 使用模块中的State
直接通过模块名访问 $store.state.模块名.xxx通过 mapState 映射 默认根级别的映射 mapState([ ‘xxx’ ]) (如mapState([ ‘user’ ]是获取整个子模块的对象)子模块的映射 mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间 namespaced:true
获取模块的getters
直接通过模块名访问 $store.getters[模块名/xxx ]通过 mapGetters 映射 默认根级别的映射 mapGetters([ xxx ]) 子模块的映射 mapGetters(模块名, [xxx]) - 需要开启命名空间
获取模块内的mutations
直接通过 store 调用 $store.commit(模块名/xxx , 额外参数)通过 mapMutations 映射 默认根级别的映射 mapMutations([ ‘xxx’ ])子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间
获取模块内的actions
直接通过 store 调用 $store.dispatch(模块名/xxx , 额外参数)通过 mapActions 映射 默认根级别的映射 mapActions([ ‘xxx’ ])子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间
onst mutations {} const actions {} const getters {} export default { namespacetrue //开启命名空间 state, mutations, actions, getters } 02.模块注册在store/index.js文件中的modules配置项中注册这两个模块js
import user from ./modules/user
import setting from ./modules/settingconst store new Vuex.Store({modules:{user,setting}
})使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx $store.state.setting.desc
也可以通过 mapState 映射 尽管已经分模块了但其实子模块的状态还是会挂到根级别的 state 中属性名就是模块名 使用模块中的State
直接通过模块名访问 $store.state.模块名.xxx通过 mapState 映射 默认根级别的映射 mapState([ ‘xxx’ ]) (如mapState([ ‘user’ ]是获取整个子模块的对象)子模块的映射 mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间 namespaced:true
获取模块的getters
直接通过模块名访问 $store.getters[模块名/xxx ]通过 mapGetters 映射 默认根级别的映射 mapGetters([ xxx ]) 子模块的映射 mapGetters(模块名, [xxx]) - 需要开启命名空间
获取模块内的mutations
直接通过 store 调用 $store.commit(模块名/xxx , 额外参数)通过 mapMutations 映射 默认根级别的映射 mapMutations([ ‘xxx’ ])子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间
获取模块内的actions
直接通过 store 调用 $store.dispatch(模块名/xxx , 额外参数)通过 mapActions 映射 默认根级别的映射 mapActions([ ‘xxx’ ])子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间
