深入解析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/zh-hk/n/186539.html