深入解析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
 {{ username }}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/186539.html