美文网首页
Vuex状态管理

Vuex状态管理

作者: EO_eaf6 | 来源:发表于2020-03-19 11:02 被阅读0次

    参考:https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

    简单入门加实例:转自:https://www.jianshu.com/p/ff2adb84c7f2

    针对于vue之间各个组件的传值复杂问题

    使用vuex来管理状态值,值一旦被修改,所有引用的地方会自动更新

    index文件创建Vuex.Store实例保存到变量store中,最后使用export default导出store

    import Vue from "vue"

    import Vuex from "vuex"

    const store=new Vuex.Store({

    state:{

    text:"text"//需要保存的数据,这里定义要保存的数据

    }

    })

    在main.js中挂载

    import store from “./store/index.vue”

    new Vue({

    el:"#app",

    store,

    router

    })

    (1)getters相当于vue的computed计算属性

    用于监听、state中的值的变化,返回计算后的结果

    当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算

    (2) mutations:修改state中的状态值的唯一方法是提交mutations;每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit

    mutations:{

    add(state,count){

    state.count+=count

    }

    dec(state){

    state.count=2

    }

    }

    组件中使用this.$store.commit("add",1)  this.$state.commit("dec")

    (3)actions:类似vue中的methods

    官方不建议直接在组件中修改state,应该在action中提交mutations,在action中可以执行store.commit,在页面中如果我们要叠这个action,则需要执行store.dispatch 

    actions:{//定义actions函数提交mutation函数

    addFun(context){//接受一个与store实例相同方法属性的context对象

    context.commit("add")

    },

    decFun(context){//接受一个与store实例相同方法属性的context对象

    context.commit("dec")

    }

    }

    页面文件

    methods:{

    addFun(){

    this.$store.dispatch("addFun")//或者

    thisaddFun({dispatch})

    }

    }

    (4)modules:用于划分state模块,每个module拥有独立的state,getters,mutations,actions

    (4)mapState、mapGetters、mapActions:用于替代“this.$store.state.count”和“this.$store.dispatch('funName')”这种很长的写法

    相关文章

      网友评论

          本文标题:Vuex状态管理

          本文链接:https://www.haomeiwen.com/subject/ememsctx.html