美文网首页
Vuex的原理,它的属性有哪些?

Vuex的原理,它的属性有哪些?

作者: 清汤饺子 | 来源:发表于2018-11-24 19:24 被阅读0次

    Vuex用来管理多个组件的共享状态。
    适用场景:
    1.多个视图依赖于同一状态
    2.来自不同视图的行为需要变更同一状态

    每个Vuex应用的本质是store(仓库),包含应用中大部分的状态。
    开始使用:

    npm install vuex
    import 'vuex'
    Vue.use(Vuex)
    
    const store  = new Vuex.Store({
        state:{
            num:1,
        },
        mutations:{
            add(state){
                state.num++;
            };
        },
    }
    })
    

    1.state

    就是定义状态,Vue是单一状态树。便于管理
    mapState辅助函数:
    当一个组件需要获取多个状态的时候,将这些状态都定义为计算属性会有些重复和冗余,可以使用mapState帮助生成计算属性。

    import {mapState} from 'Vuex'
    
    //组件中使用:
    computed: mapState([
        "count";//映射this.count为state.count
    ])
    computed: mapState({
        countA: state => state.count,
        countB: 'count',
        //为了拿到this,需要用普通函数
        countC(state){
            return state.count + this.num
        },
    })
    //相当于:
    computed:{
        count=> this.store.state.count
    }
    

    对象展开运算符...

    computed: {
       ...mapState(['count']),
       num(){ return 123},
    }
    

    2.Getter

    可以认为是store 的计算属性,会把值存储起来,当依赖值发生改变才会重新计算。当需要使用state派生出一些状态时,我们可以用Getter做到。
    mapGetter辅助函数用来将store的getter映射到局部计算属性。

    getters: {
       fn: state => {
          //对state进行操作
       }
    }
    
    //在组件中使用
    import {mapGetter} from 'vuex'
    export default{
    computed: {
       ...mapGetter(["fn"])
    }
    }
    

    相关文章

      网友评论

          本文标题:Vuex的原理,它的属性有哪些?

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