Vuex 2.0 Công văn so với Cam kết

Question

Ai đó có thể giải thích khi nào bạn sử dụng một công văn so với cam kết?

Tôi hiểu cam kết kích hoạt đột biến và công văn kích hoạt hành động.

Tuy nhiên, không phải là công văn cũng là một loại hành động?

Answer 1

Như bạn đã nói đúng, $dispatch kích hoạt hành động và commit kích hoạt đột biến. Dưới đây là cách bạn có thể sử dụng các khái niệm sau:

Bạn luôn sử dụng $dispatch từ các phương pháp của mình trong các tuyến đường/thành phần. $dispatch gửi tin nhắn đến cửa hàng vuex của bạn để thực hiện một số hành động. Hành động có thể được thực hiện bất cứ lúc nào sau đánh dấu hiện tại, để hiệu suất giao diện người dùng của bạn không bị ảnh hưởng.

Bạn không bao giờ commit từ bất kỳ thành phần/tuyến đường nào của bạn. Nó được thực hiện chỉ từ trong một hành động và chỉ khi bạn có một số dữ liệu cần thực hiện. Lý do: cam kết là đồng bộ và có thể đóng băng lối vào của bạn cho đến khi nó được thực hiện.

Hãy xem xét trường hợp này: Nếu bạn phải tìm nạp một số dữ liệu json từ máy chủ. Trong trường hợp này, bạn cần thực hiện điều này một cách không đồng bộ để giao diện người dùng của bạn không phản hồi/bị đóng băng trong một thời gian. Vì vậy, bạn chỉ cần $dispatch một hành động và hy vọng nó sẽ được thực hiện sau này. Hành động của bạn sẽ thực hiện tác vụ này, tải dữ liệu từ máy chủ và cập nhật trạng thái của bạn sau.

Nếu bạn cần phải biết khi nào một hành động kết thúc, do đó bạn có thể hiển thị một spinner ajax đến lúc đó, bạn có thể trả về một Promise như được giải thích dưới đây (ví dụ: nạp người dùng hiện hành):

Đây là cách bạn xác định hành động "loadCurrentUser":

actions: { 
    loadCurrentUser(context) { 
     // Return a promise so that calling method may show an AJAX spinner gif till this is done 
     return new Promise((resolve, reject) => { 
      // Load data from server 
      // Note: you cannot commit here, the data is not available yet 
      this.$http.get("/api/current-user").then(response => { 
       // The data is available now. Finally we can commit something 
       context.commit("saveCurrentUser", response.body) // ref: vue-resource docs 
       // Now resolve the promise 
       resolve() 
      }, response => { 
       // error in loading data 
       reject() 
      }) 
     }) 
    }, 
    // More actions 
} 

Trong trình xử lý đột biến, bạn thực hiện tất cả các cam kết bắt nguồn từ hành động. Đây là cách bạn định nghĩa "saveCurrentUser" cam kết:

mutations: { 
    saveCurrentUser(state, data) { 
     Vue.set(state, "currentUser", data) 
    }, 
    // More commit-handlers (mutations) 
} 

Trong thành phần của bạn, khi nó là created hoặc mounted, bạn chỉ cần gọi hành động như hình dưới đây:

mounted: function() { 
    // This component just got created. Lets fetch some data here using an action 
    // TODO: show ajax spinner before dispatching this action 
    this.$store.dispatch("loadCurrentUser").then(response => { 
     console.log("Got some data, now lets show something in this component") 
     // TODO: stop the ajax spinner, loading is done at this point. 
    }, error => { 
     console.error("Got nothing from server. Prompt user to check internet connection and try again") 
    }) 
} 

Trả về một Promise như ở trên là hoàn toàn tùy chọn và cũng là một quyết định thiết kế không được mọi người ưa thích. Để có cuộc thảo luận chi tiết về việc có trả lại Lời hứa hay không, bạn có thể đọc các nhận xét theo câu trả lời này: https://stackoverflow.com/a/40167499/654825