vuex整理

Vuex

定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单的说： Vuex就是创建了一个状态库，将各组件之间数据存在状态库中， 将组件与组件之间的通信变成了组件与状态之间通信

state：用来定义多组件之间的共享状态

Mutations：用来修改state数据，只能在Mutations中更改vuex状态

actions：用来定义一个方法在实例中进行异步请求

getters:相当于计算属性，当我们得到state的值之后，使用getters，将这些基本的值进行组合加工，得到我们需要的值

let store = new Vuex.Store({ state:{ //就是用来定义多组件之间的共享状态 isTabbarShow:true, cinemaList:[...] }, mutations:{ show(state){ state.isTabbarShow = true }, hide(state){ state.isTabbarShow = false } }, getters:{ //类似于computed计算属性 只不过里面的数据依赖于vuex的状态 getCinemaListFive(state){ return state.cinemaList.slice(0,5) }, }, actions:{ xxAsync(context){ axios.get().then(res=>{ context.commit("方法",参数) } } } }) created(){ this.$store.commit("hide") //commit调用mutations方法 console.log(this.$store.state.isTabbarShow) //获取state中的数据 console.log(this.$store.dispatch("xxAsync")) //获取异步请求的数据 console.log(this.$store.getters.getCinemaListFive) //获取getters方法得到的数据 }

vuex辅助函数

mapState,mapGetters,mapActions,mapMutations

mapState

mapState这个辅助函数就是为了方便获取vuex中的状态，本来获取状态 this.$store.state.xxx,使用辅助函数后直接使用this.xxx调用即可。

mapGetters

这个辅助函数与mapState的用法一模一样

mapActions

这个辅助函数用法与上面一致，但是需要定义在methods里面

created(){ if(this.cinemaList.length === 0){ // this.$store.dispatch("cinema/getCinemaListAction") this.getCinemaListAction() } }

mapMutations

这个辅助函数用法与上面一致的用法

import {mapState,mapGetters,mapMutations,mapActions} from "vuex" methods:{ //mapMutations,mapActions要放在methods中 ...mapActions("cinema",["getCinemaListAction"]), ...mapMutations("tabbar",["show","hide"]), } computed:{ //mapState,mapGetters要放在computed中 ...mapGetters(["getCinemaListFive"]), ...mapState(["cinemaList"]), } created(){ console.log(this.cinemaList) this.getCinemaListAction() }

后续如果你的computed中有跟vuex的同名的，需要通过这种方式设置

...mapState({ aaa:state=>state.cinemaList }),