Làm thế nào để chuyển một đối số cho các hàm được ánh xạ bằng ... mapActions (...)?

Question

Xét đoạn sau

export default { 
    methods: { 
    ...mapActions(["updateData", "resetData"]); 
    } 
} 

Tôi muốn vượt qua trong một tham số vào các chức năng gọi. Không chắc chắn làm thế nào để làm như vậy đúng cách trong khi vẫn giữ lại các cuộc gọi ...mapAction(), tôi đã phải viết lại sau đây.

export default { 
    methods: { 
    // ...mapActions(["updateData", "resetData"]) 
    updateData: function() { this.$store.dispatch("updateData", "names") }, 
    resetData: function() { this.$store.dispatch("resetData"); } 
    } 
} 

Đây có phải là cách duy nhất không?

Answer 1

Bạn chỉ có thể chuyển tham số cho phương thức, nơi bạn đang gọi nó. bạn chỉ có thể gửi một tham số, sẽ có sẵn trong các hành động. Bạn không cần phải làm bất cứ điều gì đặc biệt khi sử dụng mapActions

Ví dụ, bạn có thể gọi nó thích:

<button @click=updateData({data1: 1, data2: 2})> 

và trong cửa hàng vuex:

const actions = { 
    updateData: (state, data) => { 
    //You will get passed parameter as data here 
    }, 

và bạn vẫn có thể sử dụng mapActions :

export default { 
    methods: { 
    ...mapActions(["updateData", "resetData"]); 
    } 
} 

xem làm việc fiddle here: y ou có thể nhìn thấy thông qua tham số trong các cảnh báo :)

---

Đây là việc thực hiện mapActions từ vuex repo

export function mapActions (actions) { 
    const res = {} 
    normalizeMap(actions).forEach(({ key, val }) => { 
    res[key] = function mappedAction (...args) { 
     return this.$store.dispatch.apply(this.$store, [val].concat(args)) 
    } 
    }) 
    return res 
} 

Bạn có thể thấy nó có args trôi qua và đặt chúng như là một đối số thứ hai của hàm công văn .