国内做电商网站,免费网络游戏排行榜,房地产新闻头条最新消息,本地网站架设工具目录 一、vuex概述
1.定义
优势#xff1a;
2.构建环境步骤
3.state状态
4.使用数据
4.1通过store直接访问
4.2通过辅助函数
5.mutations修改数据#xff08;同步操作#xff09;
5.1定义
5.2步骤
5.2.1定义mutations对象#xff0c;对象中存放修改state数据的方…目录 一、vuex概述
1.定义
优势
2.构建环境步骤
3.state状态
4.使用数据
4.1通过store直接访问
4.2通过辅助函数
5.mutations修改数据同步操作
5.1定义
5.2步骤
5.2.1定义mutations对象对象中存放修改state数据的方法
5.2.2mutations的传参语法
5.2.3利用辅助函数mapMutations
6.actions异步处理操作
6.1提供actions方法
6.2辅助函数mapActions
7.getters基本语法没有修改只有获取
7.1直接通过store访问getters
7.2通过辅助函数mapGetters访问
8.module模块
8.1所以以我们在开发项目过程中 需要对模块进行拆分---在store下面新建modules文件夹
8.1.1配置模块文件
8.1.2导入store中并且配置到modules中使用
8.2分模块之后如何使用模块中的state、mutations、actions以及getters方法
8.2.1直接通过模块名访问
8.2.2通过辅助函数映射---默认跟级别的映射
8.2.3通过辅助函数进行子模块的映射
8.2.4关于actions方法中的context
8.3模块中更推荐的state配置写法 一、vuex概述
1.定义
vuex是一个状态管理工具可以帮助我们管理vue通用的数据多组件共享的数据
优势
共同维护一份数据数据集中化管理响应式变化操作简洁
2.构建环境步骤
安装vuex-----yarn add vuex3----此时用的是vue2所以要使用vuex3的版本新建store目录文件夹存放单独的js文件存放vuexVue.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函数名(stateobj){ //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 {//数据}}
}
