九江市建设工程质量监督站网站,网络营销策略包含哪些要素,wordpress安装,wordpress分类文章置顶说明
Vuex中提供了四个个比较常用的辅助函数#xff1a;目的是将vuex中对应的 state(),mutaiions{},actions{},getters{}中的数据#xff0c;函数映射出去#xff0c;让我们在组件中可以更加简单的使用这些数据与函数
mapStatemapMutationsmapActionsmapGetters
使用案列…说明
Vuex中提供了四个个比较常用的辅助函数目的是将vuex中对应的 state(),mutaiions{},actions{},getters{}中的数据函数映射出去让我们在组件中可以更加简单的使用这些数据与函数
mapStatemapMutationsmapActionsmapGetters
使用案列
/src/store/index.js状态管理器
import axios, { Axios } from axios;
import { CHANGE_APPISSHOW } from ./type.js
import { createStore } from vuexconst store createStore({state() {return {appIsShow: true,datalist: [],}},//同步mutations: {//参数state是vuex自动给我们注入进来的。我们调用的时候不需要传递这个参数直接传递第二个参数boolParams即可//参数boolParams: 是我们定义的参数,用户在发起调用的时候自己传入changeAppIsShow(state, boolParams) {state.appIsShow boolParams;},dataListInit(state, arrParams) {state.datalist arrParams;}},//异步同步action不能直接修改state()中的数据它是也是向mutations提交数据来修改的。actions: {async getDataList(store) {//异步const result await axios({url: https://m.maizuo.com/gateway?cityId110100ticketFlag1k3777796,headers: {X-Client-Info: {a:3000,ch:1002,v:5.2.1,e:16992764191480200349024257,bc:110100},X-Host: mall.film-ticket.cinema.list}});console.log(获取数据)//同步向mutations提交数据触发dataListInit函数并向函数传递了一个数组参数store.commit(dataListInit, result.data.data.cinemas);}},//getters:就相当于vue的计算属性。为什么vue有computed计算属性了这里还要搞一个getters呢那是因为架构师想尽可能的把数据的处理过程放到vuex中vue就作为一个展示数据的地方实现纯粹的业务数据分离//getters:的函数传递参数需要放到匿名函数中来做getters: {filterDataList(state) { //这个state就是state()中的数据return (intParams) { //这个intParams就是触发filterDataList这个函数的调用方(我们自己)传递的// return state.datalist.filter(item {// return item.eTicketFlag 0// })//注意上面注释代码中匿名函数item{return item.eTicketFlag 0} :加了{}就需要在里面多一个returnreturn state.datalist.filter(item item.eTicketFlagintParams)}}}
});export default store
main.js 注册状态管理器
import { createApp } from vue
import ./style.css
import App from ./App.vue//import store from ../src/store //状态管理器js 注意如果仅仅是指定了一个文件夹router程序会自动去router文件夹下寻找index.js并导入
//import store from ../src/store/index //导入状态管理器js 注意.js可以省略
//import store from ../src/store/myindex.js //导入状态管理器js 注意如果我们的状态管理器文件不是index.js 那么我们就得指定具体的名称了import store from ../src/store/index.js //导入状态管理器js var appcreateApp(App)app.use(store) //注册vuex插件状态管理器app.mount(#app)
组件中使用
templateselect v-model.numbertypeoption :value0App订票/option !--:value0 用数据绑定的形式则它的值是数值类型的--option :value1前台兑换/option/selectdivul!--从store的getters中获取数据--!-- li v-foritem in $store.getters.filterDataList(type) :keyitem.cinemaId{{ item.name }}/li --!-- 改用用辅助函数的方式它其实就是...mapGetters([filterDataList]) 中展开的filterDataList方法 --li v-foritem in filterDataList(type) :keyitem.cinemaId{{ item.name }}/li/ul/div
/template
script
import { mapState, mapMutations, mapActions, mapGetters } from vuex
export default {//钩子函数mounted() {//this.$store.commit(changeAppIsShow, false)代码采用辅助函数的写法this.changeAppIsShow(false) //它其实就是...mapMutations([changeAppIsShow, dataListInit]) 中展开的changeAppIsShow方法。console.log(aa,this.appIsShow);//输出false;// if (this.$store.state.datalist.length 0) {if (this.datalist.length 0) {//如果数据为空则去触发actions的中的getDataList方法达到获取datalist数据的目的。而this.$store.state.datalist中的数据存在内容中其他地方需要这个数据直接从内存中取相当于有个缓存//this.$store.dispatch(getDataList);代码改成如下辅助函数的写法this.getDataList(); //它其实就是...mapActions([getDataList]) 中展开的getDataList方法}},beforeUnmount() {//this.$store.commit(changeAppIsShow,false)代码采用辅助函数的写法this.changeAppIsShow(false) //它其实就是...mapMutations([changeAppIsShow, dataListInit]) 中展开的changeAppIsShow方法。},//数据data() {return {type: 0,}},//方法:vuex中的Mutations与Actions 放到methods中进行展开methods: {...mapMutations([changeAppIsShow, dataListInit]), //将store中的Mutations函数展开在DOM中可以直接用如changeAppIsShow(),dataListInit() 在script中也可以直接用如this.changeAppIsShow(),this.dataListInit()...mapActions([getDataList]) //将store中的Actions函数展开在DOM中可以直接用如getDataList() 在script中也可以直接用如this.getDataList()},//计算属性vuex中的Getters与State 放到computed中进行展开computed: {...mapGetters([filterDataList]), //将store中的Getters函数展开在DOM中可以直接用如filterDataList() 在script中也可以直接用如this.filterDataList()...mapState([appIsShow, datalist]) //将store中的State数据展开在DOM中可以直接用如appIsShow 在script中也可以直接用如this.appIsShow()},}
/script
