目录
5.2.1定义mutations对象,对象中存放修改state数据的方法
8.1所以以我们在开发项目过程中, 需要对模块进行拆分--->在store下面新建modules文件夹
8.2分模块之后,如何使用模块中的state、mutations、actions以及getters方法
一、vuex概述
1.定义
vuex是一个状态管理工具,可以帮助我们管理vue通用的数据(多组件共享的数据)
优势:
- 共同维护一份数据,数据集中化管理
- 响应式变化
- 操作简洁
2.构建环境步骤
- 安装vuex----->yarn add vuex@3---->此时用的是vue2所以要使用vuex3的版本
- 新建store目录文件夹存放单独的js文件存放vuex
- Vue.use(Vuex)
- 创建仓库---->cosnt store = new Vuex.Store()
- 在main.js中导入并且挂载在实例上
通过this.$store访问到仓库---->所有组件都能访问到的通用的对象
3.state状态
1.定义
类似于与vue组件中的data,都是指的数据
2.提供数据
state提供的唯一的公共数据元,所有共享的数据都要统一放到store中的state中存储,在state对象中可以添加我们要共享的数据
const store = new Vuex.Store({
state: {
//数据
}
})
注意:data中的数据是自己的数据,state中的数据是所有组件共享的数据
4.使用数据
通过store直接访问或者通过辅助函数(辅助函数访问更简单)
4.1通过store直接访问
//获取store
import store from '路径'
//利用this.store访问到仓库
//在模板中使用
{{ $store.state.xxxx }}
//组件逻辑中
this.$store.state.xxxx
//js模块中书写方法
store.state.xxxx
4.2通过辅助函数
定义:把state中数据定义在组件内的计算属性中,{{计算属性}},mapState是辅助函数,帮助我们把store中的数据映射到组件的计算属性中
//导入辅助函数
import { mapState } from "vuex"
//使用辅助函数,用数组方式引入state
mapState(['变量'])
//展开运算符映射到计算属性中
computed:{ ...mapState(['变量']) }
5.mutations修改数据(同步操作)
5.1定义
明确vuex同样的遵循单向数据流,组件中不能修改仓库中的数据
通过strict:true,可以开启严格模式(在其他组件中直接修改仓库中的数据会报错,在最终上线的时候不用开启严格模式。因为严格模式是为了更好的提醒程序员出错点以及原因便于修改)
若是想要修改state中的数据那么只能通过mutations
5.2步骤
5.2.1定义mutations对象,对象中存放修改state数据的方法
const store = new Vuex.Store({
state:{....},
mutations:{
mutations函数名(state){
//state.数据修改逻辑
}
}
})
//组件中调用
this.$store.commit('mutations函数名')
5.2.2mutations的传参语法
//传递一个参数的情况
const store = new Vuex.Store({
state:{....},
mutations:{
mutations函数名(state,参数){
//state.数据修改逻辑
}
}
})
//组件中调用
this.$store.commit('mutations函数名',参数)
//传递多个参数则采用对象模式
const store = new Vuex.Store({
state:{....},
mutations:{
mutations函数名(state,obj){
//state.数据修改逻辑
}
}
})
//组件中调用
this.$store.commit('mutations函数名',{参数1:值1,参数2:值2....})
5.2.3利用辅助函数mapMutations
mapMutations本质上就是把mutations中的方法提取出来,映射到组件的methods中
//在mutations中提供方法
const store = new Vuex.Store({
state:{....},
mutations:{
mutations函数名(state,参数){
//state.数据修改逻辑
}
}
})
//映射到组件的methods中
import { mapMutations } from 'vuex'
methods:{
...mapMutations(['mutations函数名'])
}
//组件中调用
this.函数名(参数) //可以直接利用click点击直接调用并传参
6.actions异步处理操作
6.1提供actions方法
//提供actions方法
const store = new Vuex.Store({
state:{....},
mutations:{....},
actions:{
actions函数名(context,参数){
//异步处理逻辑(如发请求)
}
}
})
//页面中调用
this.$store.dispath('actions函数名',参数)
actions处理异步操作但是并不会直接操作state,如果想要修改state,需要调用mutations方法
----->context.commit('mutations函数名',额外参数)
6.2辅助函数mapActions
同mutations一样,直接映射到组件中的methods中,可以直接调用
//在mutations中提供方法
const store = new Vuex.Store({
state:{....},
mutations:{....},
actions:{
actions函数名(context,参数){
//异步处理逻辑(如发请求)
}
}
})
//映射到组件的methods中
import { mapActions } from 'vuex'
methods:{
...mapActions(['actions函数名'])
}
//组件中调用
this.函数名(参数)
7.getters基本语法(没有修改只有获取)
有时候需要从state中派生出一种状态,这些状态时依赖于state的,此时就会用到getters
7.1直接通过store访问getters
//提供actions方法
const store = new Vuex.Store({
state:{....},
mutations:{....},
actions:{....},
getters:{
getters函数名(state){
//处理逻辑
return getters计算结果
}
}
})
//页面模板中通过store访问getters
{{ $store.getters.getters函数名 }}
7.2通过辅助函数mapGetters访问
//提供actions方法
const store = new Vuex.Store({
state:{....},
mutations:{....},
actions:{....},
getters:{
getters函数名(state){
//处理逻辑
return getters计算结果
}
}
})
//映射到组件的methods中
import { mapGetters } from 'vuex'
computed:{
...mapGetters(['getters函数名'])
}
//组件中调用
{{ getters函数名 }}
四个辅助函数记忆:
- mapState 和 mapGetters 是在映射属性
- mapMutations 和 mapActions 是在映射方法
8.module模块
由于vuex是使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,state对象就可能变得臃肿且难以维护。
8.1所以以我们在开发项目过程中, 需要对模块进行拆分--->在store下面新建modules文件夹
8.1.1配置模块文件
//在模块文件中
//配置state数据对象
cosnt state = {
数据:{
key:value,
key1:value,
...
}
}
//配置mutations方法
const mutations = {},
//actions方法
const actions = {},
//配置getters方法
const getters = {}
//导出配置对象
export default {
state,
mutations,
actions,
getters
}
8.1.2导入store中并且配置到modules中使用
//导入store中
import 文件名 from '路径'
//配置modules对象
const store = new Vue.Store({
modules:{
文件名,
...
}
})
8.2分模块之后,如何使用模块中的state、mutations、actions以及getters方法
分模块之后,各模块的辅助函数的参数state时指代子模块中的state
8.2.1直接通过模块名访问
//直接通过模块名访问state
$store.state.模块名.xxx
//直接通过模块名访问getters
$store.getters['模块名/xxx']
//直接通过模块名访问mutations
$store.commit('模块名/xxx',额外参数)
//直接通过模块名访问actions
$store.dispatch('模块名/xxx',额外参数)
8.2.2通过辅助函数映射---默认跟级别的映射
//直接通过mapState访问state----默认根级别的映射
mapState(['xxx'])
//直接通过mapGetters访问getters----默认根级别的映射
mapGetters(['xxx'])
//直接通过mapMutations访问mutations----默认根级别的映射
mapMutations(['xxx'])
//直接通过mapActions访问actions----默认根级别的映射
mapActions(['xxx'])
8.2.3通过辅助函数进行子模块的映射
//需要在子模块中开启命名空间
namespaced:true
//直接通过mapState访问state----子模块的映射
mapState('模块名',['xxx'])
//直接通过mapGetters访问getters----子模块的映射
mapGetters('模块名',['xxx'])
//直接通过mapMutations访问mutations----子模块的映射
mapMutations('模块名',['xxx'])
//直接通过mapActions访问actions----子模块的映射
mapActions('模块名',['xxx'])
8.2.4关于actions方法中的context
context是上下文的意思,默认提交的就是自己模块的actions和mutations方法,基于当前模块环境指向不同的空间
8.3模块中更推荐的state配置写法
export default {
namespaced:true,
state () { //利用函数的形式存储数据使其更加具有独立性
return {
//数据
}
}
}