zoukankan      html  css  js  c++  java
  • 详解vuex 解决多个组件之间的通信问题_Allen的博客-CSDN博客

    参考:

    详解vuex 解决多个组件之间的通信问题_Allen的博客-CSDN博客

    详解vuex
    1.安装 yarn add vuex2.引入vuex 并且让vue使用vuex新建文件src/store/index.js(仓库)
    //引入vueximport Vuex from "vuex"import Vue from "vue"Vue.use(Vuex)  //让vue使用Vuex//创建store仓库let store = new Vuex.Store({//里面写store相关的配置项})export default store;  //需要暴露出去12345678

    3.在main.js入口文件里注册store//引入vuex的实例import store from "./store"new Vue({  render: h => h(App),  router,  //就是为了让每一个组件都可以访问到路由相关的api ($router/$route)  store    //目的就是为了让每一个组件都可以访问到vuex相关的api ($store)}).$mount('#app')12345674.在仓库中index.js 定义 以及更改状态定义isTababrShow 以及 更改isTabbarShow状态的方法
    //创建storelet store = new Vuex.Store({    state:{ //就是用来定义多组件之间的共享状态        isTabbarShow:true    },    mutations:{  //如vuex流程图,只要mutations有权限更改state,    //同时这里也提供了很多更改状态的方法        show(state){            state.isTabbarShow = true        },        hide(state){            state.isTabbarShow = false        }    } })1234567891011121314155.在主入口文件App.vue里面对状态进行关联 <Tabbar v-show="$store.state.isTabbarShow"></Tabbar>  16.在Search.vue触发钩子函数一进入search页面不让tabbar显示
    created(){    //一进入search,需要更改仓库isTabbarShow将其变成false    this.$store.commit("hide")  },  beforeDestroy(){    //一旦离开search,isTabbarShow true    this.$store.commit("show")  }12345678


    同步操作闭环形成
    通过vuex异步请求数据

    Cinema.vue
    toSearch(){this.$router.push("/search")}123发现Search与Cinema组件中的数据都是一致的,不需要进入到每个组件都请求一次数据,可以在vuex中的action里面进行异步请求即可。
    1.在仓库中定义以及更改状态store/index.js
    state:{ //就是用来定义多组件之间的共享状态  this.$store.state.isTabbarShow        isTabbarShow:true,        cinemaList:[]},
     actions:{        getCinemaListAction(context){            instance.get("/gateway?cityId=310100&ticketFlag=1&k=2654330",{                headers:{                  'X-Host': 'mall.film-ticket.cinema.list'                }              }).then(res=>{              // 如何更改vuex中的cinemaList这个状态?                 // 需要触发mutations的setCinemaList这个方法                 // 第一个参数就是触发的具体的mutations的名称  第二个参数就是给其传入的异步请求获取到的数据                context.commit("setCinemaList",res.data.data.cinemas)            })        }    },  mutations:{ //后续唯一可以更改state的地方        show(state){  //组件中如何调用此方法?  this.$store.commit("方法名")            state.isTabbarShow = true        },        hide(state){            state.isTabbarShow = false        },        setCinemaList(state,cinemaList){         //第二个参数可以接受外面传递过来的参数            state.cinemaList = cinemaList        }    }})12345678910111213141516171819202122232425262728293031322.在Cinema组件中进行触发action的方法:created(){    //需要调用dispatch触发vuex的action方法    this.$store.dispatch("getCinemaListAction")  }1234需要在Cinema中使用vuex的状态cinemaList
      cinemaArea(){  let newArr = this.$store.state.cinemaList.map(item=>{    return item.districtName  })  return ["全城",...new Set(newArr)]},filterCinemaArea(){  if(this.currentArea === "全城") return this.$store.state.cinemaList;  return this.$store.state.cinemaList.filter(item=>{    return item.districtName === this.currentArea ? true : false  })}123456789101112回到Search页面,发现vuex的全局状态管理的优势体现出来了。多组件数据共享
    3.vuex存储是内存,一刷新就没有了,如果不刷新界面,可以实现多组件的数据共享。因为vuex中的数据存内存中的,一刷新就会恢复初始值。Search.vue
    created(){    if(this.$store.state.cinemaList.length>0){   console.log("vuex中的cinemaList数据有了...")    }else{ //刷新了 vuex中没有数据      this.$store.dispatch("getCinemaListAction")    }    this.$store.commit("hide")  },12345678vuex的getters获取5条影院数据开始是在Search.vue里
    getCinemaListFive(){ //组件的computed依赖于data数据return this.$store.state.cinemaList.slice(0,5)},123如果在别的地方,也需要用到vuex的5条数据的话,也得需要写一次上述的计算属性。
    需要在store/index.js里面的getters去进行单独的定义了。
    getters:{  //类似于computed计算属性 只不过里面的数据依赖于vuex的状态        getCinemaListFive(state){            return state.cinemaList.slice(0,5)        }, },12345之后在Search.vue里去调用
    <li    v-for="data in $store.getters.getCinemaListFive"    :key="data.cinemaId">{{data.name}}</li>1234vuex辅助函数(mapState,mapGetters,mapActions,mapMutations)
    mapStatemapState这个辅助函数就是为了方便获取vuex中的状态,本来获取状态 this.$store.state.xxx
    import { mapState } from 'vuex'
    computed:{    ...mapState(["cinemaList"]),      cinemaArea(){      //获取vuex的状态,直接通过this既可以访问到了      let newArr = this.cinemaList.map(item=>{        return item.districtName      })       return ["全城",...new Set(newArr)]},filterCinemaArea(){  if(this.currentArea === "全城") return this.cinemaList  return this.cinemaList.filter(item=>{    return item.districtName === this.currentArea ? true : false  })}}12345678910111213141516171819后续如果你的computed中有跟vuex的同名的,需要通过这种方式设置
    ...mapState({     aaa:state=>state.cinemaList }),123mapGetters这个辅助函数与mapState的用法一模一样
    import {mapState,mapGetters} from "vuex"1computed:{    ...mapState(["cinemaList"]),    ...mapGetters(["getCinemaListFive"]),}1234 v-for="data in getCinemaListFive"    //$store.getters.getCinemaListFive1modules因为store是单一的数据源,项目中创建的store的实例只能是一个,所以数据全都放在这一个大的实例对象中,很难去维护,所以需要对于store进行模块划分。
    store/module/tabbar.js
    const tabbar = {    namespaced: true,    state:{        isTabbarShow:true,    },    mutations:{        show(state){  //组件中如何调用此方法?  this.$store.commit("方法名")            state.isTabbarShow = true        },        hide(state){            state.isTabbarShow = false        }    }}
    export default tabbar;12345678910111213141516store/module/cinema.js
    import {instance} from "@/utils/http"const cinema = {    namespaced: true,    state:{        cinemaList:[]    },    getters:{        getCinemaListFive(state){            return state.cinemaList.slice(0,5)        },    },    actions:{        getCinemaListAction(context){            instance.get("/gateway?cityId=310100&ticketFlag=1&k=2654330",{                headers:{                  'X-Host': 'mall.film-ticket.cinema.list'                }              }).then(res=>{                // 需要触发mutations的setCinemaList这个方法                 // 第一个参数就是触发的具体的mutations的名称  第二个参数就是给其传入的异步请求获取到的数据                context.commit("setCinemaList",res.data.data.cinemas)            })        }    },    mutations:{        setCinemaList(state,cinemaList){            state.cinemaList = cinemaList        }    }}
    export default cinema;1234567891011121314151617181920212223242526272829303132store/index.js
    import tabbar from "./module/tabbar"import cinema from "./module/cinema"
    //创建storelet store = new Vuex.Store({    modules: { //通过modules将所有的分支的模块进行合并        tabbar,        cinema    }})
    1234567891011Cinema.vue
    ...mapState("cinema",["cinemaList"]),    //前提一定需要在module模块里面声明namespace:true1派发方法,也得需要按照指定的模块名字请求action与mutations
    this.$store.dispatch("cinema/getCinemaListAction")1Search.vue
    ...mapState("cinema",["cinemaList"]),...mapGetters("cinema",["getCinemaListFive"]),12created(){    if(this.cinemaList.length>0){    }else{       //dispatch("module名字/action方法")      this.$store.dispatch("cinema/getCinemaListAction")    }        //commit("module名字/commit方法")    this.$store.commit("tabbar/hide")  },  beforeDestroy(){    //commit("module名字/commit方法")    this.$store.commit("tabbar/show")  }1234567891011121314App.vue
    import {mapState} from "vuex"
    computed:mapState("tabbar",["isTabbarShow"])123<Tabbar v-show="isTabbarShow"></Tabbar>  1Search
    <button @click="back">取消</button>methods:{    back(){      this.$router.back()    }},123456mapActions这个辅助函数用法与上面一致,但是需要定义在methods里面
    import { mapState,mapActions } from 'vuex'1methods:{    ...mapActions("cinema",["getCinemaListAction"]),}123created(){    if(this.cinemaList.length === 0){      // this.$store.dispatch("cinema/getCinemaListAction")      this.getCinemaListAction()    }  }123456mapMutations这个辅助函数用法与上面一致的用法
    import {mapState,mapGetters,mapMutations,mapActions} from "vuex"1methods:{    ...mapActions("cinema",["getCinemaListAction"]),    ...mapMutations("tabbar",["show","hide"]),}1234created(){    if(this.cinemaList.length>0){
        }else{ //刷新了 vuex中没有数据      this.getCinemaListAction()    }    this.hide()},beforeDestroy(){    this.show()}
    123456789101112vuex 项目结构Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
    应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。异步逻辑都应该封装到 action 里面。只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。————————————————版权声明:本文为CSDN博主「Allen 赵奇隆」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/zqlbanzhuan/article/details/109045145

    再宏伟的目标,拆分下来,也只是一串串的代码而已;一串串的代码,细分来看,也只是一个一个的字母而已!也许,我做不到一晚上完成大神一小时随便敲打的项目,但为这一目标,每天添砖加瓦,我想我应该是可以完成的!
  • 相关阅读:
    [原创]浅谈测试团队转型,思维模式的转变是关键
    [原创]浅谈IT人如何做理财规划
    [原创]浅谈对华为34岁以上员工“退休”
    [原创]2017年1月读书推荐
    [原创] 上海利得基金招聘测试经理/测试工程师/测试开发工程师(长期有效)
    [原创]浅谈从“述职”向“述能”转变
    IBM的IT战略规划方法论
    腾讯企业大学培训经验
    [原创]Android App上线检查checklist
    移动开发规范
  • 原文地址:https://www.cnblogs.com/Annely/p/14753679.html
Copyright © 2011-2022 走看看