美文网首页JS Language
Vuex中辅助函数mapState,mapGetters,map

Vuex中辅助函数mapState,mapGetters,map

作者: 都江堰古巨基 | 来源:发表于2019-08-01 14:11 被阅读0次

    mapState,mapGetters,mapMutations,mapActions,这些辅助函数主要是为了避免在组件调用代码中写太多的部分,用最简单的方式来调用Vuex。
    一个简单的栗子:
    首先看看store的结构:


    store结构.png

    index.js:

    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import actions from './actions'
    import user from './module/user'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state,
      mutations,
      actions,
      modules: {
        user
      }
    })
    

    user.js:

    const state = {
      mytest: 'this is user.js '
    }
    
    const mutations = {
      //
    }
    
    const actions = {
      //
    }
    
    const getters = {
      doSome: state => {
        return state.mytest.split(' ')
      }
    }
    
    export default {
      state,
      mutations,
      actions,
      getters
    }
    

    在组件或页面中调用:

    export default {
      
      mounted() {
        // 使用map辅助函数:
        console.log(this.user.mytest)
        console.log(this.test)
        // 不使用map辅助函数:
        console.log(this.$store.state.user.mytest)
        console.log(this.$store.getters.test)
      },
     
      computed: {
        ...mapGetters({
          'test': 'doSome'
        }),
        ...mapState({
          'user': 'user'
        })
      }
    }
    

    mapMutations,mapActions 辅助函数的使用都是类似。

    相关文章

      网友评论

        本文标题:Vuex中辅助函数mapState,mapGetters,map

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