深入解析mapget

一、mapgetter、mapgetters和mapstate的区别

在Vue开发中，经常会用到mapget、mapgetter、mapgetters和mapstate这些函数，这些函数有何区别呢？

mapgetter和mapstate是Vuex中的两个函数，其作用是将state中的数据映射到计算属性中，供组件使用。mapget和mapgetters是Vue Router中的函数，其作用是获取路由中的参数。在普通Vue开发中，我们经常会用到mapgetters来直接获取Vuex中的计算属性。

// mapgetters的用法示例
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'username',
      'userProfile',
      'isLoading'
    ])
  }
}

在上面的示例中，我们使用了mapgetters函数将Vuex中的计算属性映射到组件的计算属性中，从而在组件中直接使用Vuex中的计算属性。

二、mapgetters的用法

mapgetters的使用非常简单，我们只需要将需要映射的计算属性名列举出来即可。Vue会根据计算属性名自动查找该计算属性在state中的位置，从而自动映射到组件的计算属性中。

// mapgetters的用法示例
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'username',
      'userProfile',
      'isLoading'
    ])
  }
}

在上面的示例中，我们使用了mapgetters函数将Vuex中的计算属性映射到组件的计算属性中，从而在组件中直接使用Vuex中的计算属性。

三、mapget不存在的key

当我们使用mapget获取一个不存在的计算属性时，Vue会自动将其解析为undefined。这种情况下，我们可以使用默认值来避免出现错误。

// mapget不存在的key示例
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'username',
      'userProfile',
      'isLoading',
      // 不存在的key
      'nonexistentGetter'
    ]),
    // 使用默认值
    nonexistentGetter() {
      return 'default value'
    }
  }
}

四、mapgetters用法

mapgetters函数可以接收一个对象作为参数，这个对象的键是计算属性的别名，值是计算属性名。这样做的好处是可以将计算属性名重命名为更易读的别名。

// mapgetters用法示例
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      name: 'username',
      profile: 'userProfile',
      isLoading: 'isLoading'
    })
  }
}

在上面的示例中，我们使用了mapgetters函数并传递了一个对象作为参数，将Vuex中的计算属性名重命名为更易读的别名，并将其映射到组件的计算属性中。

五、mapgetters不能直接修改store中的数据

mapgetters的作用仅在于将store中的数据映射到组件的计算属性中，而不能直接修改store中的数据。

// mapgetters不能直接修改store中的数据示例
import { mapGetters } from 'vuex'

export default {
  methods: {
    // 该方法不能直接修改store中的数据
    setUsername() {
      this.username = 'new username'
    }
  },
  computed: {
    ...mapGetters([
      'username'
    ])
  }
}

六、完整代码示例

// store.js
const state = {
  username: 'John Doe',
  userProfile: {
    name: 'John Doe',
    age: 30,
    email: 'johndoe@example.com'
  },
  isLoading: false
}

const getters = {
  username: state => state.username,
  userProfile: state => state.userProfile,
  isLoading: state => state.isLoading
}

const mutations = {
  setUsername(state, payload) {
    state.username = payload
  }
}

const actions = {
  setUsername({ commit }, payload) {
    commit('setUsername', payload)
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

// component.vue

  

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      username: 'username',
      profile: 'userProfile',
      isLoading: 'isLoading'
    })
  },
  methods: {
    ...mapActions([
      'setUsername'
    ])
  }
}
</script>

上面的代码演示了如何使用mapgetters将Vuex中的计算属性映射到组件的计算属性中，并且如何在组件中使用action修改store中的数据。