Thay đổi trạng thái mô-đun khác từ một mô-đun trong Vuex

Tôi có hai mô-đun trong cửa hàng vuex của mình.

var store = new Vuex.Store({
    modules: {
        loading: loading 
        posts: posts
    }
});

Trong mô-đun loading, tôi có một thuộc tính savingcó thể được đặt truehoặc falsevà cũng có một hàm đột biến được đặt tên TOGGLE_SAVINGđể đặt thuộc tính này.

Trong mô-đun posts, trước và sau khi tìm nạp các bài đăng, tôi muốn thay đổi thuộc tính saving. Tôi đang làm điều đó bằng cách gọi commit('TOGGLE_SAVING')từ một trong các hành động trong postsmô-đun.

var getPosts = function (context) {
    contex.commit(TOGGLE_LOADING);
};

Khi nó cố gắng cam kết, tôi gặp lỗi sau trong bảng điều khiển

[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 

Làm cách nào để thay đổi trạng thái trong mô-đun khác bằng cách sử dụng commit?

Hãy thử nó với các thông số sau như được đề xuất ở đây ;

commit('TOGGLE_LOADING', null, { root: true })

Nếu bạn đã namespacedđặt thành true (trong Nuxt là mặc định khi ở chế độ mô-đun), điều này sẽ trở thành:

commit('loading/TOGGLE_LOADING', null, { root: true })

bạn có thể sử dụng hành động để thực hiện đột biến được xác định trong mô-đun khác, sau đó bạn sẽ sửa đổi trạng thái trong mô-đun khác.

như thế này:

posts: {
  actions: {
    toggleSavingActions(context) {
      // some actions 
      context.commit("TOGGLE_SAVING"); // defined in loading module
    }
  }
}

Bạn cũng có thể nhập cửa hàng, như bạn thường làm trong bất kỳ tệp js nào và sử dụng nó. Ví dụ:

// src/state/modules/posts.js

import store from '@/state/store'
...
store.commit('posts/TOGGLE_LOADING')
...

Điều này hoạt động khá tốt, điều duy nhất là có thể làm khó các bài kiểm tra cô lập hoặc mô phỏng.

Phiên bản : Gần đây tôi đã loại bỏ tất cả mã bằng cách sử dụng kỹ thuật mà tôi đề cập do các vấn đề thử nghiệm. Thật vậy, bạn luôn có thể thay đổi trạng thái của các mô-đun khác theo cách được khuyến nghị, như trong ví dụ này. Rất hữu ích nếu bạn quản lý xác thực và hồ sơ trong mô-đun bản năng.

logout: context => {
  return new Promise((resolve) => {
    // Clear token in all axios requests
    axios.defaults.headers.common['Authorization'] = ''
    // Logout from firebase
    firebase
      .auth()
      .signOut()
      .then(() => {
        // Update state in profile module
        context.commit('profile/SET_USER', null, {
          root: true
        })
        resolve()
      })
      .catch(error => reject(error))
  })
}